/*
 * Pro Blinds layout system. Loaded on the front end AND inside the block editor (parity rule).
 * Numbers come from Figma auto layout via block attributes -> CSS variables.
 * Responsive behaviour follows design/mobile-rules.md and uses container queries on .pb-page
 * (front end <main>) / .editor-styles-wrapper (editor), so the editor canvas and the page respond
 * to the same width.
 */

:root {
    --pb-c-green: #4e804e;
    --pb-c-navy: #283649;
    --pb-c-blue: #6990c5;
    --pb-c-ice: #f4f4f4;
    --pb-c-text: #202020;
    --pb-c-white: #ffffff;
    --pb-c-star: #ffaa00;
    --pb-c-table-blue: #38476d;
    --pb-c-light-green: #e2f0e2;
    --pb-c-dark: #0d1718;
    --pb-c-charcoal: #313131;
    --pb-c-black: #000000;
    --pb-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --pb-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --pb-font-foot: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.pb-page {
    container: pb-page / inline-size;
}

/* Layout variables are set per element (inline style from block attributes) and must never
   inherit into nested blocks. Reset them on every layout element; inline styles still win. */
.pb-section__inner,
:root .wp-block-blacksheep-pb-stack,
:root .wp-block-blacksheep-pb-media,
:root .wp-block-blacksheep-pb-faq {
    --pb-gap: initial;
    --pb-rgap: initial;
    --pb-pt: initial;
    --pb-pr: initial;
    --pb-pb: initial;
    --pb-pl: initial;
    --pb-w: initial;
    --pb-h: initial;
    --pb-ratio: initial;
    --pb-minh: initial;
    --pb-bg: initial;
    --pb-radius: initial;
}

/* Horizontal unit: 1px at >=1280, shrinks proportionally below (laptop band). */
.wp-block-blacksheep-pb-section,
.wp-block-blacksheep-pb-stack {
    --pb-hu: min(1px, 0.078125cqi);
    --pb-vu: 1px;
}

/* ---------- Section ---------- */
:root .wp-block-blacksheep-pb-section {
    background-color: var(--pb-bg, transparent);
    box-sizing: border-box;
    color: var(--pb-c-text);
    font-family: var(--pb-font);
    font-size: 16px;
    font-weight: 400;
    isolation: isolate;
    line-height: 1.5; /* Poppins "normal" (Figma auto line height), explicit so fallback glyphs (stars, arrows) cannot grow a line */
    margin: 0;
    max-width: none;
    position: relative;
    width: 100%;
}

.wp-block-blacksheep-pb-section.pb-clip {
    overflow: clip;
}

.pb-section__bg {
    display: block;
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: var(--pb-bg-pos, center);
    opacity: var(--pb-bg-op, 1);
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.pb-section__inner {
    margin-inline: auto;
    max-width: 1280px;
    min-height: var(--pb-minh, auto);
    width: 100%;
}

.pb-bleed > .pb-section__inner {
    max-width: none;
}

/* ---------- Shared auto layout ---------- */
.pb-section__inner,
:root .wp-block-blacksheep-pb-stack {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--pb-rgap, var(--pb-gap, 0px)) var(--pb-gap, 0px);
    padding:
        calc(var(--pb-pt, 0) * var(--pb-vu))
        calc(var(--pb-pr, 0) * var(--pb-hu))
        calc(var(--pb-pb, 0) * var(--pb-vu))
        calc(var(--pb-pl, 0) * var(--pb-hu));
    position: relative;
}

:root .wp-block-blacksheep-pb-stack {
    background-color: var(--pb-bg, transparent);
    border-radius: var(--pb-radius, 0);
    margin: 0;
    max-width: 100%;
    min-width: 0;
}

.pb-dir-row { flex-direction: row !important; }
.pb-wrap { flex-wrap: wrap; }
.pb-j-center { justify-content: center; }
.pb-j-end { justify-content: flex-end; }
.pb-j-between { justify-content: space-between; }
.pb-a-start { align-items: flex-start; }
.pb-a-center { align-items: center; }
.pb-a-end { align-items: flex-end; }
.pb-a-stretch { align-items: stretch; }
.pb-a-baseline { align-items: baseline; }
.pb-self-stretch { align-self: stretch; }
.pb-self-center { align-self: center; }
.pb-self-start { align-self: flex-start; }
.pb-self-end { align-self: flex-end; }

.pb-w-fill { flex: 1 1 0; min-width: 0; }
.pb-w-full { align-self: stretch; width: 100%; }
:root .pb-w-fixed { flex-shrink: 1; width: var(--pb-w); }
/* Figma children are shrink-0: at 1280+ nothing shrinks (overflow is part of the design). */
.pb-dir-col > *,
.pb-dir-row > * { flex-shrink: 0; }
.pb-dir-col > .pb-h-fill { flex-shrink: 1; }
.pb-dir-row > .pb-w-fill { flex: 1 1 0; }
.pb-dir-row > .pb-w-fixed { flex: 0 0 var(--pb-w); }
.pb-h-fixed { height: var(--pb-h); }
.pb-h-full { align-self: stretch; height: auto; }
.pb-dir-col > .pb-h-full { flex: 1 1 auto; }
.pb-h-fill { flex: 1 1 0; min-height: 0; }
.pb-clip { overflow: clip; }
.pb-abs { position: absolute !important; }

/* Children never carry their own outer margins: spacing is the parent's gap (as in Figma). */
:root .pb-section__inner > *,
:root .wp-block-blacksheep-pb-stack > * {
    margin: 0;
    max-width: 100%;
}

:root .wp-block-blacksheep-pb-section :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote) {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: inherit;
    margin: 0;
    text-transform: none;
}

:root .wp-block-blacksheep-pb-section :where(h1, h2, h3, h4, h5, h6, p, li) {
    overflow-wrap: break-word;
}

:root .wp-block-blacksheep-pb-section a {
    color: inherit;
}

:root .wp-block-blacksheep-pb-section p a,
:root .wp-block-blacksheep-pb-section li a {
    text-decoration: underline;
}

:root .wp-block-blacksheep-pb-section p.pb-link a,
:root .wp-block-blacksheep-pb-section .pb-link a {
    text-decoration: none;
}

.pb-stack__link {
    inset: 0;
    position: absolute;
    z-index: 2;
}

/* ---------- Media ---------- */
:root .wp-block-blacksheep-pb-media {
    aspect-ratio: var(--pb-ratio, auto);
    border-radius: var(--pb-radius, 0);
    display: block;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

:root .wp-block-blacksheep-pb-media.pb-h-fixed {
    aspect-ratio: auto;
}

.pb-media__img,
.pb-media__link,
.pb-media__lightbox {
    display: block;
    height: 100%;
    width: 100%;
}

:root .pb-media__img {
    border-radius: inherit;
    max-width: none;
    object-fit: cover;
}

.pb-fit-contain .pb-media__img { object-fit: contain; }

/* "Fill container" media (h full/fill, no ratio) take their height from the layout, never from the photo's own
   proportions (Figma sizes the frame first, then fits the image). Stacked layouts below 900px keep the natural ratio. */
@container pb-page (min-width: 900px) {
    :root .wp-block-blacksheep-pb-media:is(.pb-h-full, .pb-h-fill):not([style*="--pb-ratio"]) > .pb-media__img,
    :root .wp-block-blacksheep-pb-media:is(.pb-h-full, .pb-h-fill):not([style*="--pb-ratio"]) > a {
        inset: 0;
        position: absolute;
    }
}

.pb-media__empty {
    align-items: center;
    background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 10px, #e3e8ef 10px, #e3e8ef 20px);
    color: #4b5563;
    display: flex;
    font: 500 13px/1.3 var(--pb-font-ui);
    height: 100%;
    justify-content: center;
    min-height: 120px;
    padding: 12px;
    text-align: center;
}

/* ---------- Buttons (core/button styles) ---------- */
:root .wp-block-blacksheep-pb-section .wp-block-buttons,
:root .pb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}

:root .wp-block-button:is(.is-style-pb-primary, .is-style-pb-outline, .is-style-pb-outline-light) {
    margin: 0;
}

:root .wp-block-button:is(.is-style-pb-primary, .is-style-pb-outline, .is-style-pb-outline-light) .wp-block-button__link {
    align-items: center;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    display: inline-flex;
    font-family: var(--pb-font-ui);
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1.2;
    padding: 17px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

:root .wp-block-button.is-style-pb-primary .wp-block-button__link {
    background-color: var(--pb-c-green);
    color: #fff;
}

:root .wp-block-button.is-style-pb-primary .wp-block-button__link:hover,
:root .wp-block-button.is-style-pb-primary .wp-block-button__link:focus-visible {
    background-color: #3f6b3f;
}

:root .wp-block-button.is-style-pb-outline .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--pb-c-green);
    color: var(--pb-c-green);
}

:root .wp-block-button.is-style-pb-outline .wp-block-button__link:hover,
:root .wp-block-button.is-style-pb-outline .wp-block-button__link:focus-visible {
    background-color: var(--pb-c-green);
    color: #fff;
}

:root .wp-block-button.is-style-pb-outline-light .wp-block-button__link {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}

:root .wp-block-button.is-style-pb-outline-light .wp-block-button__link:hover,
:root .wp-block-button.is-style-pb-outline-light .wp-block-button__link:focus-visible {
    background-color: #fff;
    color: var(--pb-c-navy);
}

:root .wp-block-button .wp-block-button__link:focus-visible {
    outline: 2px solid var(--pb-c-blue);
    outline-offset: 3px;
}

/* ---------- Comparison table (core/table style) ---------- */
:root .wp-block-table.is-style-pb-compare {
    border: 1px solid var(--pb-c-blue);
    border-radius: 6px;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

:root .wp-block-table.is-style-pb-compare table {
    border-collapse: collapse;
    font-family: var(--pb-font);
    font-size: 14px;
    line-height: 1.5;
    table-layout: fixed;
    width: 100%;
}

:root .wp-block-table.is-style-pb-compare :is(thead, tfoot) { border: 0; }

:root .wp-block-table.is-style-pb-compare :is(th, td) {
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--pb-c-blue);
    border-left: 1px solid var(--pb-c-blue);
    color: var(--pb-c-text);
    font-weight: 400;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

:root .wp-block-table.is-style-pb-compare tr > :first-child {
    background: var(--pb-c-ice);
    border-left: 0;
    color: var(--pb-c-navy);
    font-weight: 700;
    white-space: nowrap;
    width: 150px;
}

:root .wp-block-table.is-style-pb-compare thead :is(th, td) {
    background: var(--pb-c-ice);
    font-size: 14px;
    vertical-align: middle;
}

:root .wp-block-table.is-style-pb-compare thead :is(th, td) strong {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
}

:root .wp-block-table.is-style-pb-compare thead tr > :first-child { background: #fff; }

:root .wp-block-table.is-style-pb-compare tr > :last-child {
    background: var(--pb-c-light-green);
    color: var(--pb-c-navy);
}

:root .wp-block-table.is-style-pb-compare tbody tr:last-child > * { border-bottom: 0; }

:root .wp-block-table.is-style-pb-compare thead :is(th, td) { position: relative; }

/* Figma "FLAGSHIP" badge: absolutely placed in the header cell (left 142, top 16) */
:root .wp-block-table.is-style-pb-compare mark {
    background: var(--pb-c-green) !important;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    left: 142px;
    line-height: 1.5;
    padding: 0 6px;
    position: absolute;
    top: 16px;
    white-space: nowrap;
}

@container pb-page (max-width: 899px) {
    :root .wp-block-table.is-style-pb-compare { overflow-x: auto; }
    :root .wp-block-table.is-style-pb-compare table { min-width: 760px; }
}

/* ---------- Background media inside stacks ---------- */
.wp-block-blacksheep-pb-stack:has(> .pb-v-bg) { isolation: isolate; }
:root .wp-block-blacksheep-pb-media.pb-v-bg { height: 100%; width: 100%; z-index: -1; }

/* ---------- Lists ---------- */
:root .wp-block-blacksheep-pb-section ul.wp-block-list,
:root .wp-block-blacksheep-pb-section ol.wp-block-list {
    list-style: disc;
    padding: 0;
}

:root .wp-block-blacksheep-pb-section ol.wp-block-list { list-style: decimal; }

:root .wp-block-blacksheep-pb-section .wp-block-list > li {
    margin: 0 0 var(--pb-li-gap, 12px) var(--pb-li-indent, 24px);
}

:root .wp-block-blacksheep-pb-section .wp-block-list > li:last-child { margin-bottom: 0; }
.pb-li-gap-0 { --pb-li-gap: 0px; }

/* Stacked title lines pulled together in Figma (negative paragraph spacing): leading line is a block-level mark */
:root mark.pb-title-line { display: block; }

/* Figma draws the bullet as the text font's own "•" glyph, centred in the 24px indent (a CSS disc is larger and sits further left) */
:root .wp-block-blacksheep-pb-section ul.wp-block-list { list-style: none; }
:root .wp-block-blacksheep-pb-section ul.wp-block-list > li { position: relative; }
:root .wp-block-blacksheep-pb-section ul.wp-block-list > li::before {
    content: "\2022";
    left: calc(-1 * var(--pb-li-indent, 24px));
    position: absolute;
    text-align: center;
    top: 0;
    width: var(--pb-li-indent, 24px);
}

/* ---------- Blog listing (core Query Loop, Figma "CTA 1 Circle Image" cards) ---------- */
:root .pb-blog-list { margin: 0; width: 100%; }
:root .pb-blog-list .pb-blog-list__items {
    display: flex;
    flex-direction: column;
    gap: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
}
:root .pb-blog-list .pb-blog-list__items > li { margin: 0; }
:root .pb-blog-card__img {
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
}
:root .pb-blog-card__img a,
:root .pb-blog-card__img img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
:root .pb-blog-list .wp-block-post-title { margin: 0; width: 100%; }
:root .pb-blog-list .wp-block-post-title a { color: inherit; text-decoration: none; }
:root .pb-blog-list .wp-block-post-title a:hover { color: var(--pb-c-green); }
:root .pb-blog-card__excerpt { margin: 0; width: 100%; }
:root .pb-blog-card__excerpt .wp-block-post-excerpt__excerpt { font-size: 16px; line-height: 1.5; margin: 0; }
:root .pb-blog-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
:root .wp-block-read-more.pb-blog-card__more {
    color: var(--pb-c-green);
    display: block;
    text-align: right;
    text-decoration: none;
    width: 100%;
}
:root .wp-block-read-more.pb-blog-card__more:hover { text-decoration: underline; }
:root .pb-blog-list__pages { gap: 16px; justify-content: center; margin: 60px 0 0; }
:root .pb-blog-list__pages:empty { display: none; }
@container pb-page (min-width: 900px) {
    /* alternate: every second card has the image on the right */
    /* count only real cards: the editor keeps a hidden duplicate of the selected post in the list */
    :root .pb-blog-list .wp-block-post:nth-child(even of .wp-block-post:not([style*="display"])) > .pb-blog-card.pb-dir-row { flex-direction: row-reverse !important; }
}
@container pb-page (max-width: 899px) {
    :root .pb-blog-card > .pb-blog-card__img { align-self: center !important; }
}

/* ---------- Icons + contact details (outlines exported from Figma) ---------- */
:root .wp-block-blacksheep-pb-icon,
:root .pb-contact .pb-icon {
    color: inherit;
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    padding-top: var(--pb-icon-off, 0px);
}
.pb-icon__svg { display: block; overflow: visible; }
.pb-icon__link { color: inherit; display: block; }
.pb-icon__link:hover { opacity: 0.8; }
:root .wp-block-blacksheep-pb-contact {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    margin: 0;
}
:root .wp-block-blacksheep-pb-contact.pb-contact--end { justify-content: flex-end; }
:root .pb-contact__text { margin: 0; }
:root .wp-block-blacksheep-pb-contact .pb-contact__text a { color: inherit; text-decoration: none; }
:root .wp-block-blacksheep-pb-contact .pb-contact__text a:hover { text-decoration: underline; }

/* ---------- Contact form (Gravity Forms "Contact", Figma 143:9205) ----------
   GF's own CSS is switched off on the front end (pb-theme.php); every property that matters is set here so the
   editor preview (where GF may still load its theme CSS) renders the same. */
:root .pb-form_wrapper.gform_wrapper { margin: 0; padding: 0; width: 100%; }
:root .pb-form_wrapper .gform_heading,
:root .pb-form_wrapper .gform_required_legend { display: none !important; }
:root .pb-form_wrapper form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
:root .pb-form_wrapper .gform-body,
:root .pb-form_wrapper .gform_body { margin: 0; padding: 0; }
:root .pb-form_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
:root .pb-form_wrapper .gfield { margin: 0 !important; padding: 0 !important; }
:root .pb-form_wrapper .gfield_label,
:root .pb-form_wrapper .hidden_label .gfield_label,
:root .pb-form_wrapper .gform_validation_container,
:root .pb-form_wrapper .gfield--type-honeypot {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}
:root .pb-form_wrapper .ginput_container { margin: 0 !important; }
:root .pb-form_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    appearance: none;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #2c2c2c !important;
    display: block;
    font: 400 18px/1.15 Arial, Helvetica, sans-serif !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    outline-offset: 2px;
    padding: 8px !important; /* Figma: 10px from the outer edge, stroke drawn inside */
    width: 100% !important;
}
:root .pb-form_wrapper .gfield textarea { height: 94.667px !important; resize: vertical; }
:root .pb-form_wrapper :is(input, textarea)::placeholder { color: #2c2c2c; opacity: 1; }
:root .pb-form_wrapper :is(input, textarea):focus-visible { outline: 2px solid var(--pb-c-green); }
:root .pb-form_wrapper .gform_footer,
:root .pb-form_wrapper .gform-footer { margin: 0 !important; padding: 0 !important; }
:root .pb-form_wrapper .gform_footer :is(input[type="submit"], button),
:root .pb-form_wrapper .gform-footer :is(input[type="submit"], button) {
    appearance: none;
    background: var(--pb-c-green) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    font: 700 16px/18px var(--pb-font) !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    width: auto !important;
}
:root .pb-form_wrapper .gform_footer :is(input[type="submit"], button):hover { background: #3f6b3f !important; }
:root .pb-form_wrapper .gfield_validation_message,
:root .pb-form_wrapper .validation_message {
    background: none !important;
    border: 0 !important;
    color: #b3261e !important;
    font: 400 14px/1.4 var(--pb-font) !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
:root .pb-form_wrapper .gform_validation_errors {
    background: none !important;
    border: 2px solid #b3261e !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 10px !important;
    padding: 10px !important;
}
:root .pb-form_wrapper .gform_validation_errors h2 { color: #b3261e !important; font: 700 16px/1.4 var(--pb-font) !important; margin: 0 !important; }
:root .pb-form_wrapper .gfield_error :is(input, textarea) { border-color: #b3261e !important; }
:root .gform_confirmation_message { font: 400 18px/1.5 var(--pb-font); }

/* ---------- FAQ ---------- */
:root .wp-block-blacksheep-pb-faq {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pb-gap, 20px));
    margin: 0;
    min-width: 0;
}

/* Figma's divider is a zero-height vector (the stroke takes no layout space): draw it without adding height */
.pb-faq__item {
    box-shadow: inset 0 1px 0 var(--pb-faq-line, var(--pb-c-blue));
    display: block;
    padding-top: 20px;
}

.pb-faq__q {
    cursor: pointer;
    display: block;
    font-family: var(--pb-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    list-style: none;
    position: relative;
    text-transform: capitalize;
}

.pb-faq__q::-webkit-details-marker { display: none; }
.pb-faq__q::marker { content: ''; }

.pb-faq__q:focus-visible {
    outline: 2px solid var(--pb-c-blue);
    outline-offset: 4px;
}

.pb-faq__a {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
}

:root .pb-faq__a p { margin: 0 0 12px; }
:root .pb-faq__a p:last-child { margin-bottom: 0; }

.pb-faq__item:not([open]):not(.is-open) > .pb-faq__a { display: none; }
details.pb-faq__item > .pb-faq__a { display: block; }
details.pb-faq__item:not([open]) > .pb-faq__a { display: none; }

/* ---------- Lightbox (gallery) ---------- */
.pb-lightbox {
    align-items: center;
    background: rgba(13, 23, 24, 0.86);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 40px 20px;
    position: fixed;
    z-index: 9999;
}

.pb-lightbox[hidden] { display: none; }

.pb-lightbox img {
    border-radius: 10px;
    height: auto;
    max-height: calc(100vh - 80px);
    max-width: min(900px, 100%);
    object-fit: contain;
}

.pb-lightbox__close {
    background: #fff;
    border: 0;
    border-radius: 50%;
    color: var(--pb-c-text);
    cursor: pointer;
    font: 700 18px/1 var(--pb-font);
    height: 40px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
}

/* =========================================================
 * Responsive rules (design/mobile-rules.md). Container widths.
 * ========================================================= */

/* Laptop and below: fixed widths may no longer exceed their container. At 1280+ Figma overflow is kept. */
@container pb-page (max-width: 1279px) {
    :root .pb-w-fixed { max-width: 100%; }
    .pb-dir-row > :not(.pb-w-fill) { flex-shrink: 1; }
    .pb-dir-row > .pb-w-fixed { flex: 0 1 var(--pb-w); }
}

/* Tablet: 600-899 */
@container pb-page (max-width: 899px) {
    .wp-block-blacksheep-pb-section,
    .wp-block-blacksheep-pb-stack {
        --pb-vu: 0.8px;
    }

    .pb-section__inner,
    :root .wp-block-blacksheep-pb-stack {
        padding-left: min(calc(var(--pb-pl, 0) * 1px), 40px);
        padding-right: min(calc(var(--pb-pr, 0) * 1px), 40px);
    }

    /* Two-item rows (splits) stack. */
    .pb-dir-row:not(.pb-m-keep):not(:has(> :nth-child(3))) {
        flex-direction: column !important;
        gap: min(var(--pb-gap, 0px), 32px);
    }

    /* Three-plus item rows (grids) become two-up. --pb-cgap carries the ROW's gap down to its items
       (each item has its own --pb-gap for its own children). */
    .pb-dir-row:not(.pb-m-keep):has(> :nth-child(3)) {
        --pb-cgap: var(--pb-gap, 0px);
        flex-wrap: wrap;
        row-gap: max(var(--pb-gap, 0px), 24px);
    }

    .pb-dir-row:not(.pb-m-keep):has(> :nth-child(3)) > * {
        flex: 1 1 calc(50% - var(--pb-cgap, 0px));
        width: auto;
    }
}

/* Numbered rows (01 | title | text): stay one row on tablet, stack on mobile */
@container pb-page (min-width: 600px) and (max-width: 899px) {
    .pb-dir-row.pb-m-tablet-row { flex-direction: row !important; flex-wrap: nowrap !important; gap: 20px !important; }
    .pb-dir-row.pb-m-tablet-row > * { align-self: auto !important; flex: 0 0 auto !important; width: auto !important; }
    .pb-dir-row.pb-m-tablet-row > :first-child { flex: 0 0 36px !important; width: 36px !important; }
    .pb-dir-row.pb-m-tablet-row > .pb-w-fixed { flex: 0 1 var(--pb-w) !important; width: var(--pb-w) !important; }
}

/* Mobile: < 600 */
@container pb-page (max-width: 599px) {
    .wp-block-blacksheep-pb-section,
    .wp-block-blacksheep-pb-stack {
        --pb-vu: 0.7px;
    }

    .pb-section__inner,
    :root .wp-block-blacksheep-pb-stack {
        padding-left: min(calc(var(--pb-pl, 0) * 1px), 20px);
        padding-right: min(calc(var(--pb-pr, 0) * 1px), 20px);
    }

    .pb-dir-row:not(.pb-m-keep) {
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: min(var(--pb-gap, 0px), 32px);
    }

    /* grids too: single column, never wrap into extra columns */
    .pb-dir-row:not(.pb-m-keep):has(> :nth-child(3)) {
        flex-wrap: nowrap;
    }

    .pb-dir-row:not(.pb-m-keep):has(> :nth-child(3)) > * {
        flex: 0 0 auto;
    }

    :root .wp-block-button:is(.is-style-pb-primary, .is-style-pb-outline, .is-style-pb-outline-light) .wp-block-button__link {
        white-space: normal;
    }
}

/* Anything stacked (tablet splits, all rows on mobile) */
@container pb-page (max-width: 899px) {
    .pb-dir-row:not(.pb-m-keep):not(:has(> :nth-child(3))) > *,
    .pb-m-stack > * {
        align-self: stretch;
        flex: 0 0 auto;
        width: 100%;
    }

    .pb-dir-row:not(.pb-m-keep):not(:has(> :nth-child(3))) > .wp-block-blacksheep-pb-media.pb-w-fixed,
    .pb-dir-row:not(.pb-m-keep):not(:has(> :nth-child(3))) > .wp-block-blacksheep-pb-stack > .wp-block-blacksheep-pb-media.pb-w-fixed:only-child {
        align-self: center;
        max-width: min(100%, var(--pb-w));
    }

    .pb-m-reverse > :last-child,
    .pb-m-reverse > .pb-section__inner > :last-child { order: -1; }

    .pb-dir-row:not(.pb-m-keep) > .pb-h-fixed:not(.wp-block-blacksheep-pb-media),
    .pb-dir-row.pb-h-fixed:not(.pb-m-keep),
    .pb-section__inner.pb-h-fixed {
        height: auto;
    }

    .pb-m-hide { display: none !important; }
}

@container pb-page (max-width: 599px) {
    .pb-dir-row:not(.pb-m-keep) > * {
        align-self: stretch;
        width: 100%;
    }

    .pb-dir-row:not(.pb-m-keep) > .wp-block-blacksheep-pb-media.pb-w-fixed {
        align-self: center;
        max-width: min(100%, var(--pb-w));
    }

    :root .pb-abs.pb-m-static { position: relative !important; inset: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    :root .wp-block-button .wp-block-button__link { transition: none; }
}