/**
 * Page Designer — Panel Block — frontend + canvas styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 3.7.329)
 *
 * A self-contained "panel" / content card modelled on the Page Designer
 * Wizard Step 5 preview: a headline, a line of body copy, a highlighted
 * inner content card (title + text), and a call-to-action button. Unlike
 * the wizard preview this block ships WITHOUT the tab label — just the
 * button.
 *
 * STRICT ISOLATION
 * ----------------
 *   - Every selector is namespaced `.pd-blk-pnl*` — no overlap with any
 *     other block, tool, or panel.
 *   - Panel-mutable state (drop-shadow tier, element visibility, content
 *     alignment) is driven by `data-pd-pnl-*` attributes + classes the
 *     Panel Settings Panel (pd_pnl_panel.js, pd-pnl-pnl-*) writes to the
 *     root. The block's own namespace `pd-blk-pnl-*` is SEPARATE from the
 *     settings-panel namespace `pd-pnl-pnl-*`.
 *
 * COLOUR COMPLIANCE
 * -----------------
 *   Renders on the PUBLISHED page, so NO admin `--at-color-*` tokens
 *   (those exist only in the editor). Surfaces, text and the button all
 *   read Global Theme `--pd-*` tokens (the same ones the wizard preview
 *   maps): outer panel = Section surface, inner card = Column surface,
 *   headline = Header text, body = General text, button = Buttons theme.
 *   The drop shadow is derived from `currentColor` via color-mix so it
 *   adapts to the active theme. Zero hardcoded colours.
 */

/* ── Root panel (the outer card / surface) ─────────────────────── */
.pd-blk-pnl {
    /* Baseline chrome — the block's default look (like the Hero block
       ships its default background). Users can override border / radius /
       padding / background via the Design panel at any time. */
    position: relative;
    box-sizing: border-box;
    /* horizontal padding, exposed as a var so a full-bleed background strip
       can cancel it with a matching negative margin */
    --pd-blk-pnl-pad-x: 36px;
    max-width: var(--pd-blk-pnl-max-width, 720px);
    margin: 24px auto;
    padding: 32px var(--pd-blk-pnl-pad-x);
    border-radius: 14px;
    /* clip full-bleed strips to the panel's rounded corners (box-shadow is
       unaffected — it always renders outside the border box) */
    overflow: hidden;
    background: var(--pd-color-section, color-mix(in srgb, currentColor 5%, transparent));
    color: var(--pd-header-color, var(--pd-text, inherit));
    font-family: var(--pd-general-font, inherit);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Drop-shadow tiers (data-driven, currentColor-derived) ─────── *
 * Soft / Medium / Strong increase blur + opacity together. The colour is
 * a color-mix of currentColor (the theme's ink) so it always reads as a
 * shadow without ever hardcoding a colour. */
.pd-blk-pnl[data-pd-pnl-shadow="none"]   { box-shadow: none; }
.pd-blk-pnl[data-pd-pnl-shadow="soft"]   { box-shadow: 0 1px 3px color-mix(in srgb, currentColor 9%, transparent),
                                                        0 4px 10px color-mix(in srgb, currentColor 7%, transparent); }
.pd-blk-pnl[data-pd-pnl-shadow="medium"] { box-shadow: 0 2px 6px color-mix(in srgb, currentColor 12%, transparent),
                                                        0 8px 22px color-mix(in srgb, currentColor 14%, transparent); }
.pd-blk-pnl[data-pd-pnl-shadow="strong"] { box-shadow: 0 4px 10px color-mix(in srgb, currentColor 16%, transparent),
                                                        0 14px 36px color-mix(in srgb, currentColor 24%, transparent); }

/* ── Band rows (wrap the narrow image + button) ────────────────── *
 * Full-width flex rows so the optional background strip can be a band
 * that spans the whole panel while the image / button sit on top at
 * their natural size. Alignment of the image / button is driven by the
 * row's justify-content (see the alignment block below). */
.pd-blk-pnl-imagerow,
.pd-blk-pnl-btnrow {
    display: flex;
    /* width stays auto (stretched full by the column) so the strip's
       negative horizontal margins can expand the band to both panel edges;
       an explicit width:100% would only let it bleed on one side. */
    box-sizing: border-box;
}

/* ── Hero image (optional, top of panel) ───────────────────────── *
 * A real <img> (GrapesJS image component) so the settings panel's
 * Source / upload / Orientation (TUI editor) all work exactly like the
 * Image block. 16:9 and contained; the empty state shows the duplicated
 * image placeholder baked into the seed src. */
.pd-blk-pnl-image {
    display: block;
    /* 16:9 box, sized smaller than the panel so the Content alignment tool
       can place it left / centre / right. object-fit:cover crops any
       uploaded image to the 16:9 frame; the placeholder is authored 16:9. */
    width: 70%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* ── Text containment ──────────────────────────────────────────── *
 * Long words must wrap inside the panel (min-width:0 lets each flex
 * child shrink below its content width) and never spill past the panel
 * edge — even at the narrowest Width setting. */
.pd-blk-pnl-headline,
.pd-blk-pnl-body,
.pd-blk-pnl-card-title,
.pd-blk-pnl-card-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Headline ──────────────────────────────────────────────────── */
.pd-blk-pnl-headline {
    margin: 0;
    font-family: var(--pd-header-font, inherit);
    /* default headline size — editable per block via the Text panel's
       font-size slider (which writes --pd-rt-fs on the <h2> and wins). */
    font-size: 36px;
    font-weight: var(--pd-header-weight, 700);
    line-height: 1.15;
    color: var(--pd-header-color, inherit);
}

/* ── Body copy ─────────────────────────────────────────────────── */
.pd-blk-pnl-body {
    margin: 0;
    font-family: var(--pd-general-font, inherit);
    font-size: var(--pd-general-size, 16px);
    font-weight: var(--pd-general-weight, 400);
    line-height: var(--pd-general-lh, 1.6);
    color: var(--pd-general-color, inherit);
}

/* ── Inner content card (highlighted surface) ──────────────────── */
.pd-blk-pnl-card {
    box-sizing: border-box;
    border-radius: 10px;
    padding: 16px 22px;
    background: var(--pd-color-column, color-mix(in srgb, currentColor 8%, transparent));
    color: var(--pd-general-color, inherit);
}
.pd-blk-pnl-card-title {
    margin: 0 0 4px;
    font-family: var(--pd-header-font, inherit);
    font-size: calc(var(--pd-general-size, 16px) * 1.05);
    font-weight: 700;
    color: var(--pd-header-color, inherit);
}
.pd-blk-pnl-card-text {
    margin: 0;
    font-size: calc(var(--pd-general-size, 16px) * 0.9);
    line-height: 1.5;
    color: var(--pd-general-color, inherit);
}

/* ── Call-to-action button ─────────────────────────────────────── *
 * Reads the Global Theme > Buttons tokens so it matches every other
 * themed button site-wide. Border / radius overridable via Design panel. */
.pd-blk-pnl-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 22px;
    border: 2px solid var(--pd-btn-bg, var(--pd-link-color, currentColor));
    border-radius: var(--pd-btn-radius, 8px);
    background: var(--pd-btn-bg, var(--pd-link-color, currentColor));
    color: var(--pd-btn-color, var(--pd-label-color, #ffffff));
    font-family: var(--pd-btn-font, var(--pd-label-font, inherit));
    font-size: var(--pd-btn-size, 15px);
    font-weight: 600;
    text-transform: var(--pd-btn-transform, none);
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pd-blk-pnl-btn:hover {
    /* Live hover colour comes from the always-present Global Theme
       --pd-btn-hover-bg token; the fallback simply reuses the base bg
       (cold-load insurance) so no colour literal is needed here. */
    background: var(--pd-btn-hover-bg, var(--pd-btn-bg, var(--pd-link-color, currentColor)));
    border-color: var(--pd-btn-hover-bg, var(--pd-btn-bg, var(--pd-link-color, currentColor)));
    color: var(--pd-btn-hover-color, var(--pd-btn-color, var(--pd-label-color, #ffffff)));
}

/* ── Content alignment (data/class driven by the panel's align tool) ─ */
.pd-blk-pnl-align-left   { text-align: left; }
.pd-blk-pnl-align-center { text-align: center; }
.pd-blk-pnl-align-right  { text-align: right; }
/* image + button sit inside full-width band rows — align them via the
   row's justify-content so the alignment still works whether or not a
   background strip band is showing behind them */
.pd-blk-pnl-align-left   .pd-blk-pnl-imagerow,
.pd-blk-pnl-align-left   .pd-blk-pnl-btnrow { justify-content: flex-start; }
.pd-blk-pnl-align-center .pd-blk-pnl-imagerow,
.pd-blk-pnl-align-center .pd-blk-pnl-btnrow { justify-content: center; }
.pd-blk-pnl-align-right  .pd-blk-pnl-imagerow,
.pd-blk-pnl-align-right  .pd-blk-pnl-btnrow { justify-content: flex-end; }

/* The two HEADINGS must be aimed at directly, not left to inherit.
 *
 * The Global Theme writes a rule for `h1..h6` carrying its own text-align. A
 * rule that targets an element always beats alignment inherited from an
 * ancestor, so the panel setting reached the tagline, the card body and the
 * button — which are not headings — while the headline and the card title kept
 * the theme's alignment and sat left in a panel set to centre. Naming them here
 * puts them at two classes deep, which outranks the theme's single element
 * selector without needing !important. */
.pd-blk-pnl-align-left   .pd-blk-pnl-headline,
.pd-blk-pnl-align-left   .pd-blk-pnl-card-title { text-align: left; }
.pd-blk-pnl-align-center .pd-blk-pnl-headline,
.pd-blk-pnl-align-center .pd-blk-pnl-card-title { text-align: center; }
.pd-blk-pnl-align-right  .pd-blk-pnl-headline,
.pd-blk-pnl-align-right  .pd-blk-pnl-card-title { text-align: right; }

/* ── Element visibility toggles (lossless — element stays in the DOM/
   model, just hidden, so toggling back restores its content) ─────── */
.pd-blk-pnl[data-pd-pnl-image="0"]    .pd-blk-pnl-imagerow { display: none; }
.pd-blk-pnl[data-pd-pnl-headline="0"] .pd-blk-pnl-headline { display: none; }
.pd-blk-pnl[data-pd-pnl-body="0"]     .pd-blk-pnl-body     { display: none; }
.pd-blk-pnl[data-pd-pnl-card="0"]     .pd-blk-pnl-card     { display: none; }
.pd-blk-pnl[data-pd-pnl-btn="0"]      .pd-blk-pnl-btnrow   { display: none; }

/* ── Background colour strips (one per element, independent) ────── *
 * Each zone (image / tagline / content card / button) can show its own
 * full-width colour band at the same time, each with its own colour +
 * opacity. A band bleeds to the panel edges via negative horizontal
 * margins that cancel the panel padding (content stays inset), and the
 * panel's overflow:hidden clips it to the rounded corners. The colour +
 * opacity per element are written to --pd-blk-pnl-strip-<key> by the
 * settings panel (user-picked content values) — no colour lives here. */
.pd-blk-pnl[data-pd-pnl-strip-image="1"] .pd-blk-pnl-imagerow,
.pd-blk-pnl[data-pd-pnl-strip-body="1"]  .pd-blk-pnl-body,
.pd-blk-pnl[data-pd-pnl-strip-card="1"]  .pd-blk-pnl-card,
.pd-blk-pnl[data-pd-pnl-strip-btn="1"]   .pd-blk-pnl-btnrow {
    border-radius: 0;
    /* override the body's max-width:100% so the band can bleed past the
       content box to both panel edges */
    max-width: none;
    margin-left: calc(-1 * var(--pd-blk-pnl-pad-x, 36px));
    margin-right: calc(-1 * var(--pd-blk-pnl-pad-x, 36px));
    padding-left: var(--pd-blk-pnl-pad-x, 36px);
    padding-right: var(--pd-blk-pnl-pad-x, 36px);
    padding-top: 18px;
    padding-bottom: 18px;
}
.pd-blk-pnl[data-pd-pnl-strip-image="1"] .pd-blk-pnl-imagerow { background: var(--pd-blk-pnl-strip-image, transparent); }
.pd-blk-pnl[data-pd-pnl-strip-body="1"]  .pd-blk-pnl-body     { background: var(--pd-blk-pnl-strip-body, transparent); }
.pd-blk-pnl[data-pd-pnl-strip-card="1"]  .pd-blk-pnl-card     { background: var(--pd-blk-pnl-strip-card, transparent); }
.pd-blk-pnl[data-pd-pnl-strip-btn="1"]   .pd-blk-pnl-btnrow   { background: var(--pd-blk-pnl-strip-btn, transparent); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pd-blk-pnl { padding: 24px 20px; }
    .pd-blk-pnl-headline { font-size: 28px; }
}

/* ==========================================================================
 * EQUAL HEIGHT for panels sharing a row
 *
 * Panels side by side came out different heights whenever one card's text
 * wrapped to an extra line. The copy is not the cause — sibling text is
 * length-matched to within a few characters. The cause is the STRUCTURE:
 * the generator does not put four panels in four columns of one row. It nests
 * them, so the real chain is
 *
 *     outer row > outer cell > inner row > inner cell > panel
 *
 * Making the innermost cell stretch achieved nothing, because the inner ROW
 * between it and the outer cell is only as tall as its own content — the height
 * never reaches down. Both earlier attempts used a direct-child selector and
 * missed for exactly this reason.
 *
 * So every link in the chain has to carry the height, at whatever depth it sits.
 * Scoped to containers that actually hold a panel, so every other block keeps
 * the content-height behaviour bento layouts depend on.
 * ========================================================================== */
.gjs-cell:has(.pd-blk-pnl),
.gjs-cell:has([data-pd-block="panel"]) {
    /* align-self ONLY — no explicit height.
     *
     * Setting height:100% here as well was the bug: a definite height cancels
     * `stretch`, so each cell fell back to its own content height and the row
     * stayed ragged. Measured proof — in a 548px row, one cell sat at 527 and
     * its neighbour at 548, both reporting align-self:stretch and both ignoring
     * it. Stretch is what makes flex children equal; let it do its job. */
    align-self: stretch;
}
.gjs-row:has(.pd-blk-pnl),
.gjs-row:has([data-pd-block="panel"]) {
    height: 100%;
    align-items: stretch;
}
.pd-blk-pnl,
[data-pd-block="panel"] {
    height: 100%;
}

/* --------------------------------------------------------------------------
 * …and pin the button to the bottom, so a card title that wraps to two lines
 * pushes the text apart rather than pushing the button out of line with its
 * neighbours. Equal panel height alone still leaves the buttons at different
 * heights inside those panels.
 * -------------------------------------------------------------------------- */
.pd-blk-pnl > .pd-blk-pnl-btnrow {
    margin-top: auto;
}