/* ============================================================
   PLUSFAB -- SERVICE DOMAINS (two presentation styles, 2026-10-12)
   ------------------------------------------------------------
   A template-scoped presentation layer over the universal
   feature_alternating module (web/partials/feature_alternating.php
   + /web/assets/css/feature-alternating.css). The shared stylesheet
   is linked from the page body, after this file, so every rule here
   carries the body.tpl-nursery_template prefix and wins on
   specificity.

   The module's "Presentation style" setting puts ONE of two classes
   on the section; the markup is the same for both:

     .fea-layout--alternating  (default)  STYLE A -- §3
         STRUCTURED ROWS: one service per row, each row its own
         panel, the photograph on the LEFT of every row and the
         text on the right. Nothing changes sides.
     .fea-layout--panels                  STYLE B -- §4
         EQUAL PANELS: the services side by side, photograph above
         text.

   In both styles every service is a white panel on the section's
   light-grey ground, so the services read as separate things, and
   every photograph has one proportion (--pf-photo-ratio) at every
   screen width.

   §1-§2 are shared by both styles (header, number, text, tags,
   button, photograph treatment). §3 is written against
   :not(.fea-layout--panels) and §4 against .fea-layout--panels, so
   neither style can reach the other.

   Replaces the full-width bands of 2026-10-07 (photograph running
   to the edge of the screen, bands touching, text side alternating
   white / grey, mirrored 42/58 split, photograph changing sides).
   On a wide screen the photograph grew with the page margin while
   the band kept its height, so photographs became long strips cut
   hard at top and bottom; the line between text and photograph
   moved from row to row; the three services read as one block.

   PlusFab does not alternate: the photograph side is fixed, and the
   module's stored `reverse` value is left as it is but steers
   nothing here. (Other templates keep the module's own alternating
   default; nothing in this file reaches them.)

   TEXT HIERARCHY, in this order and never reversed: service title,
   lead sentence, description, feature labels. The labels are the
   smallest and lightest text of a row.
============================================================ */

body.tpl-nursery_template .feature-alternating-section {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    --pf-line:   var(--mt-neutral-200, #E1E4E7);
    /* One proportion for every photograph in the section. 3:2 is the
       middle of the photographs in use (16:9, 4:3 and 3:2 sources): each
       loses at most a narrow strip on two sides. */
    --pf-photo-ratio: 3 / 2;

    padding: 56px 0 64px;
    background: var(--mt-surface-sunken, #F6F7F8);
    color: var(--mt-neutral-700, #3E444A);
}


/* ============================================================
   §1  SECTION HEADER (both styles)
============================================================ */
body.tpl-nursery_template .feature-alternating-section .fea-header {
    max-width: none;
    margin: 0 0 32px;
    text-align: left;
}
body.tpl-nursery_template .feature-alternating-section .fea-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--mt-space-4, 16px);
    padding: 0;
    border-radius: 0;
    background: none;
    font-family: var(--mt-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--pf-ink);
}
body.tpl-nursery_template .feature-alternating-section .fea-eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--pf-yellow);
    box-shadow: 4px 4px 0 var(--pf-ink);
}
body.tpl-nursery_template .feature-alternating-section .fea-heading {
    max-width: 20em;
    margin: 0 0 var(--mt-space-3, 12px);
    font-family: var(--mt-font-heading);
    font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.03em;
    color: var(--pf-ink);
    text-wrap: balance;
}
body.tpl-nursery_template .feature-alternating-section .fea-subheading {
    max-width: 56ch;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mt-neutral-600, #555C63);
}


/* ============================================================
   §2  PARTS SHARED BY BOTH STYLES
============================================================ */
body.tpl-nursery_template .feature-alternating-section .fea-list {
    counter-reset: pf-domain;
}
/* One service = one white panel. */
body.tpl-nursery_template .feature-alternating-section .fea-row {
    counter-increment: pf-domain;
    border: 1px solid var(--pf-line);
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
}

/* Photograph: a plain rectangle of one proportion. The image is out of
   flow, so a photograph's own size never sets the size of its frame. */
body.tpl-nursery_template .feature-alternating-section .fea-visual {
    position: relative;
    min-width: 0;
}
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-visual-frame {
    position: relative;
    aspect-ratio: var(--pf-photo-ratio);
}
/* Style B: the shared stylesheet makes the frame fill the panel's picture
   area, which is 3:2 too. */
body.tpl-nursery_template .feature-alternating-section .fea-visual-frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--mt-neutral-100, #EEF0F2);
    overflow: hidden;
}
body.tpl-nursery_template .feature-alternating-section .fea-visual-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The module's stand-ins for a missing photograph, in PlusFab colours
   (Style B shows them; Style A drops the empty side -- §3). */
body.tpl-nursery_template .feature-alternating-section .fea-visual-iconcard,
body.tpl-nursery_template .feature-alternating-section .fea-visual-placeholder {
    background: var(--mt-neutral-100, #EEF0F2);
    color: var(--pf-ink);
}

body.tpl-nursery_template .feature-alternating-section .fea-text {
    position: relative;
    min-width: 0;
}

/* Service number: small, with the one yellow accent -- a short rule. */
body.tpl-nursery_template .feature-alternating-section .fea-text::before {
    content: counter(pf-domain, decimal-leading-zero);
    display: block;
    width: 44px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--pf-yellow);
    font-family: var(--mt-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--pf-ink);
}

/* A row that has a photograph does not also show its icon tile above the
   title: the icon is the module's stand-in for a missing image. In
   Style B the tile is never shown -- the panel's picture area carries the
   icon when there is no photograph. */
body.tpl-nursery_template .feature-alternating-section .fea-row:has(.fea-visual-frame img) .fea-icon,
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-icon {
    display: none;
}
body.tpl-nursery_template .feature-alternating-section .fea-icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--mt-space-3, 12px);
    border-radius: 0;
    background: var(--pf-ink);
    color: var(--pf-yellow);
    font-size: 1.05rem;
}

/* TEXT, phone sizes (each style sets its larger sizes in §3 / §4).
   1 title  2 lead  3 description  4 feature labels. Every service title is
   the same size: the services are equals. */
body.tpl-nursery_template .feature-alternating-section .fea-title {
    margin: 0 0 var(--mt-space-3, 12px);
    font-family: var(--mt-font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--pf-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
body.tpl-nursery_template .feature-alternating-section .fea-lead {
    margin: 0 0 var(--mt-space-3, 12px);
    max-width: 48ch;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pf-ink);
}
body.tpl-nursery_template .feature-alternating-section .fea-desc {
    margin: 0 0 var(--mt-space-5, 20px);
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mt-neutral-700, #3E444A);
}

/* Feature labels: quiet tags -- the smallest, lightest text of the row, on
   the section's grey so they sit back from the white panel. */
body.tpl-nursery_template .feature-alternating-section .fea-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--mt-space-5, 20px);
}
body.tpl-nursery_template .feature-alternating-section .fea-points li {
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--pf-line);
    background: var(--mt-surface-sunken, #F6F7F8);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mt-neutral-700, #3E444A);
}
body.tpl-nursery_template .feature-alternating-section .fea-points i { display: none; }
body.tpl-nursery_template .feature-alternating-section .fea-points li::before {
    content: "+";
    flex-shrink: 0;
    font-family: var(--mt-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mt-neutral-500, #6B737A);
}
body.tpl-nursery_template .feature-alternating-section .fea-points:last-child,
body.tpl-nursery_template .feature-alternating-section .fea-desc:last-child,
body.tpl-nursery_template .feature-alternating-section .fea-lead:last-child {
    margin-bottom: 0;
}

/* Button: the site's black cut-corner button, yellow on hover. */
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 24px;
    border: 2px solid var(--pf-ink);
    border-radius: 0;
    background: var(--pf-ink);
    box-shadow: none;
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    transition: background-color 0.2s var(--mt-ease-default),
                border-color 0.2s var(--mt-ease-default),
                color 0.2s var(--mt-ease-default);
}
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary::after {
    content: "\2192";   /* right arrow */
    color: var(--pf-yellow);
    transition: transform 0.2s var(--mt-ease-default), color 0.2s var(--mt-ease-default);
}
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary:hover,
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary:focus-visible,
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary:active {
    border-color: var(--pf-yellow);
    background: var(--pf-yellow);
    color: #FFFFFF;
    outline: none;
}
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary:hover::after,
body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary:focus-visible::after {
    color: #FFFFFF;
    transform: translateX(5px);
}

@media (min-width: 576px) {
    body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary { display: inline-flex; }
}
@media (min-width: 768px) {
    body.tpl-nursery_template .feature-alternating-section { padding: 64px 0 72px; }
    body.tpl-nursery_template .feature-alternating-section .fea-header { margin-bottom: 40px; }
}
@media (min-width: 992px) {
    body.tpl-nursery_template .feature-alternating-section { padding: 80px 0 88px; }
    body.tpl-nursery_template .feature-alternating-section .fea-header { margin-bottom: 48px; }
}


/* ============================================================
   §3  STYLE A -- STRUCTURED ROWS (the default)
   One service per row, each row its own panel. From 768px the
   photograph is set into the LEFT of every panel and the text sits
   on its right -- the same in every row, so the eye reads straight
   down one column. The photograph keeps its 3:2 shape whatever the
   length of the text beside it. Phone: photograph, then text.
============================================================ */
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-list {
    gap: 20px;
}
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-visual {
    order: -1;                /* phone: photograph first */
}
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-text {
    padding: 22px 20px 26px;
}
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-cta {
    margin-top: 0;
}
/* A row without a photograph is not laid out with an empty half: its
   visual column is dropped and the text keeps the row. (All PlusFab rows
   have photographs; this is only the fallback.) */
body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row:not(:has(.fea-visual-frame img)) .fea-visual {
    display: none;
}

@media (min-width: 768px) {
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 28px;
        padding: 24px;
    }
    /* Every placement is explicit (column AND row) and the same for every
       row, so neither source order nor the module's `reverse` class can
       move a column. */
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row .fea-visual {
        grid-column: 1;
        grid-row: 1;
        order: 0;
    }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row .fea-text {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }
    /* Fallback row without a photograph: text across both columns. */
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row:not(:has(.fea-visual-frame img)) .fea-text {
        grid-column: 1 / -1;
    }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-title { font-size: 1.6rem; }
}

@media (min-width: 992px) {
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-list {
        gap: 28px;
    }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(32px, 4vw, 56px);
        align-items: center;
        padding: 32px;
    }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-title { font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.2rem); }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-lead  { font-size: 1.2rem; }
    body.tpl-nursery_template .feature-alternating-section:not(.fea-layout--panels) .fea-desc  { font-size: 1.05rem; }
}


/* ============================================================
   §4  STYLE B -- EQUAL SERVICE PANELS
   The structure (panel grid, photograph above text, 768-991px
   photograph beside text, panels per line) comes from the shared
   stylesheet's .fea-layout--panels rules. Here: PlusFab's type
   sizes and spacing for a panel.
============================================================ */
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-list {
    gap: 20px;
}
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-row .fea-text {
    padding: 22px 20px 26px;
}
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-points {
    margin-bottom: 0;
}
/* Written with the shared stylesheet's own selector so the space above the
   button holds in the side-by-side panels too. */
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-cta,
body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-row:not(:first-child:last-child) .fea-cta {
    padding-top: 20px;
}

@media (min-width: 768px) {
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-row .fea-text {
        padding: 24px 28px;
    }
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-title { font-size: 1.6rem; }
}
@media (min-width: 992px) {
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-list {
        gap: 24px;
    }
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-row .fea-text {
        padding: 26px 26px 30px;
    }
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-title {
        font-size: clamp(1.3rem, 0.8rem + 0.75vw, 1.55rem);
        line-height: 1.15;
    }
    /* Panels side by side: every title keeps room for two lines, so a
       title that needs two (and one that needs one) leave the text under
       them starting on the same line in every panel. Nothing is cut: a
       longer title simply grows. Not for a single wide panel. */
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-row:not(:first-child:last-child) .fea-title {
        min-height: 2.3em;    /* two lines at line-height 1.15 */
    }
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-lead { font-size: 1.05rem; }
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-lead,
    body.tpl-nursery_template .feature-alternating-section.fea-layout--panels .fea-desc { max-width: none; }
}


@media (prefers-reduced-motion: reduce) {
    body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary,
    body.tpl-nursery_template .feature-alternating-section .fea-cta .btn-primary::after {
        transition: none;
    }
}