/* ==========================================================================
   NOTE ON UNITS

   Font sizes here are in px, not rem, and deliberately so: this site's root
   font size is 10px rather than the usual 16px, so every rem value rendered at
   62.5% of its intended size — a 100px page title arriving as 62.5px. px is
   immune to whatever the root is set to.
   ========================================================================== */

/* ==========================================================================
   REUSABLE PAGE BLOCKS
   [sy_page_hero] [sy_intro] [sy_mosaic] [sy_split] [sy_cta]
   Markup: inc/about-page.php. About page content: Customize > SY Sections.

   The class prefix is deliberately NOT .aly-: the theme's css/about.css still
   loads on any page using the old "About Us - Luxury" template, and two sets of
   rules fighting over the same names would be impossible to reason about later.
   ========================================================================== */

.sy-ap {
    background: #ffffff;
}

/* --- Shared tokens --------------------------------------------------------
   Scoped to the blocks rather than :root so nothing here can leak into the
   theme or an Elementor widget sitting next to them. */
.sy-pagehero,
.sy-intro,
.sy-mosaic,
.sy-split,
.sy-cta {
    --sy-ink: #2c2520;
    --sy-body: #6b6256;
    --sy-muted: #a09080;
    --sy-panel: #f2ece2;
    --sy-rule: #c3b6a3;
    --sy-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sy-sans: 'Raleway', Helvetica, Arial, sans-serif;
    --sy-gutter: clamp(20px, 5vw, 90px);
}

/* --- Image placeholder ----------------------------------------------------
   Shown wherever an image has not been chosen yet, so a page can be laid out
   and reviewed before the photography exists. */
.sy-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ede8e1;
    /* Hairline inset frame, so it reads as intentional rather than broken. */
    box-shadow: inset 0 0 0 1px rgba(160, 144, 128, 0.35);
}

.sy-ph-mark {
    width: 34px;
    height: 26px;
    border: 1px solid rgba(120, 106, 90, 0.5);
    position: relative;
    overflow: hidden;
}

/* A tiny hill-and-sun glyph, drawn rather than shipped as an icon file. */
.sy-ph-mark::before {
    content: "";
    position: absolute;
    left: 5px;
    bottom: -7px;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    background: rgba(120, 106, 90, 0.45);
}

.sy-ph-mark::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(120, 106, 90, 0.55);
}

.sy-ph-text {
    font-family: var(--sy-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(120, 106, 90, 0.75);
}

/* ==========================================================================
   1. PAGE HERO  —  [sy_page_hero]
   ========================================================================== */

.sy-pagehero {
    position: relative;
    height: var(--sy-ph-height, 560px);
    /* A floor as well as a height: if the custom property is ever missing or
       the height is overridden to something small, the banner still has room
       for its title rather than collapsing around it. */
    min-height: 340px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sy-pagehero-media {
    position: absolute;
    inset: 0;
}

/* Deliberately still: the push-in belongs to the three mosaic tiles only. */
.sy-pagehero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sy-pagehero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(30, 24, 18, var(--sy-ph-scrim, 0.25));
}

/*
 * Centred by absolute positioning, not by the parent's flex alignment.
 *
 * The banner is 560px tall and the content was still sitting near the top of
 * it. Rather than keep chasing which rule is winning over align-items, this
 * pins the block to the middle of the section outright: the parent is
 * position:relative, so top/left 50% with a -50%/-50% translate lands it dead
 * centre regardless of what the flex context is doing.
 */
.sy-pagehero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 30px);
    padding: 0 var(--sy-gutter);
    text-align: center;
}

.sy-pagehero-title {
    margin: 0;
    font-family: var(--sy-serif);
    /* ~100px at full width. The reference sets its page titles at roughly
       that, and at 74px ours read as a caption above the photograph rather
       than as the page's own name. */
    font-size: clamp(41.6px, 6.4vw, 100px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
}

/* Sits over the image, so it carries its own scrim rather than relying on the
   banner's — a pale photo would otherwise swallow white text on a bare border. */
.sy-pagehero-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sy-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 32px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(44, 37, 32, 0.28);
    backdrop-filter: blur(2px);
    transition: background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sy-pagehero-btn::before,
.sy-pagehero-btn::after {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.85;
}

.sy-pagehero-btn:hover,
.sy-pagehero-btn:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--sy-ink);
}

/* ==========================================================================
   2. INTRO  —  [sy_intro]
   ========================================================================== */

.sy-intro {
    padding: clamp(48px, 6.5vw, 92px) var(--sy-gutter) clamp(36px, 4.5vw, 62px);
}

.sy-intro-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: start;
    max-width: 1360px;
    margin: 0 auto;
}

/* The lockup that carries the whole page: large, light, generously tracked,
   with the italic serif words breaking up the caps. */
.sy-intro-heading {
    margin: 0;
    font-family: var(--sy-serif);
    font-size: clamp(27.2px, 3.1vw, 46.4px);
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sy-ink);
}

.sy-intro-heading em {
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    /* Italic lower-case sits optically smaller than tracked caps beside it. */
    font-size: 1.12em;
}

.sy-intro-body {
    padding-top: clamp(6px, 1vw, 14px);
}

.sy-intro-body p {
    margin: 0;
    font-family: var(--sy-sans);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 2.05;
    color: var(--sy-body);
}

/* ==========================================================================
   3. MOSAIC  —  [sy_mosaic]

   Three images, centred in the same container as the rest of the page. One wide
   shot on the left, two equal companions to its right. They animate in once as
   the band scrolls into view, staggered left to right — they do not scroll.
   ========================================================================== */

.sy-mosaic {
    padding: 0 var(--sy-gutter);
    margin-bottom: clamp(24px, 3vw, 46px);
}

.sy-mosaic-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 6px;
    height: clamp(300px, 34vw, 460px);
    max-width: 1360px;
    margin: 0 auto;
}

.sy-mosaic-item {
    position: relative;
    overflow: hidden;
    background: #ede8e1;

    /*
     * Same reveal as the homepage About images: slide in from the left with a
     * fade, once, as the band scrolls into view. sections.js adds
     * .sy-mosaic-item--visible; the per-tile delay comes from --sy-i, so they
     * arrive left to right rather than all at once.
     */
    opacity: 0;
    transform: translateX(-45px);
    transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc((var(--sy-i, 1) - 1) * 0.22s);
    will-change: opacity, transform;
}

.sy-mosaic-item--visible {
    opacity: 1;
    transform: translateX(0);
}

.sy-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   4. SPLIT  —  [sy_split]

   Panel and image are different heights, centred against each other. That
   offset is the whole look; matching them edge to edge flattens it into an
   ordinary two-column row.
   ========================================================================== */

.sy-split {
    display: grid;
    /*
     * Panel 931 wide, image 399, to the reference's proportions. Expressed as
     * fr rather than pixels so the pair scales together on smaller screens
     * instead of overflowing: at the 1360px max-width they resolve to exactly
     * 931px and 399px, and below that they shrink in step.
     */
    grid-template-columns: 931fr 399fr;
    /*
     * Stretch, not center. Centring let the tall image overhang the copy panel
     * at both ends, so the photo dominated and the text block looked like the
     * smaller element. Flush tops and bottoms is what the reference does.
     */
    align-items: stretch;
    gap: clamp(14px, 2.2vw, 30px);
    /* 931 + 399 + the 30px gap. */
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(12px, 1.4vw, 22px) var(--sy-gutter);
}

/*
 * Image on the left for alternating blocks.
 *
 * The column WIDTHS have to swap too, not just the child order. Reordering
 * alone drops the copy panel into the narrow 1fr column and hands the wide one
 * to the image — which is what made "Our Team" render with a huge photo and a
 * squeezed panel while the other two blocks looked correct.
 */
.sy-split--flip {
    grid-template-columns: 399fr 931fr;
}

.sy-split--flip .sy-split-panel {
    order: 2;
}

.sy-split-panel {
    position: relative;
    background: var(--sy-panel);
    /* Generous top and bottom, tighter at the sides — the reference gives the
       copy far more breathing room above the eyebrow than beside it. */
    padding: clamp(48px, 6.2vw, 96px) clamp(30px, 3.8vw, 60px);
    /* 502px at full width, scaling down with the columns below that. The
       image cell stretches to match, so both finish at the same height. */
    min-height: clamp(360px, 37vw, 502px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * Two hairlines inside the panel, at opposite corners: top-right and
 * bottom-left. Each runs flush to its own side edge and stops about a third of
 * the way across. Inside is the point — outside the panel they read as stray
 * marks floating in the gutter.
 */
.sy-split-panel::before,
.sy-split-panel::after {
    content: "";
    position: absolute;
    width: clamp(90px, 17%, 190px);
    height: 1px;
    background: var(--sy-rule);
}

.sy-split-panel::before {
    top: clamp(20px, 2.4vw, 36px);
    right: 0;
}

.sy-split-panel::after {
    bottom: clamp(20px, 2.4vw, 36px);
    left: 0;
}

.sy-split-eyebrow {
    display: block;
    font-family: var(--sy-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--sy-muted);
    margin-bottom: 16px;
}

.sy-split-title {
    margin: 0 0 26px;
    font-family: var(--sy-serif);
    /* 56px at the layout's full width, scaling down with it. */
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sy-ink);
}

.sy-split-text p {
    margin: 0 0 18px;
    font-family: var(--sy-sans);
    font-size: 13px;
    line-height: 2.05;
    color: var(--sy-body);
}

.sy-split-text p:last-child {
    margin-bottom: 0;
}

.sy-split-image {
    position: relative;
    overflow: hidden;
    background: #ede8e1;
    /* No aspect-ratio: the panel sets the row height and the image matches it,
       so the two always finish flush however long the copy runs. */
}

.sy-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   5. CTA BANNER  —  [sy_cta]
   ========================================================================== */

.sy-cta {
    position: relative;
    min-height: clamp(280px, 34vw, 460px);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(18px, 2.2vw, 34px);
}

.sy-cta--empty {
    background-color: #ede8e1;
}

.sy-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 15, 10, 0.35);
}

.sy-cta--empty::before {
    background: transparent;
}

.sy-cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Rules either side of the label, matching the About section's button. */
.sy-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--sy-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    padding: 18px 44px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    transition: background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sy-cta--empty .sy-cta-btn {
    color: var(--sy-ink);
    border-color: rgba(44, 37, 32, 0.5);
}

.sy-cta-btn::before,
.sy-cta-btn::after {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.8;
}

.sy-cta-btn:hover,
.sy-cta-btn:focus-visible {
    background: #ffffff;
    color: var(--sy-ink);
}

.sy-cta--empty .sy-cta-btn:hover,
.sy-cta--empty .sy-cta-btn:focus-visible {
    background: var(--sy-ink);
    color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE

   Below 991px everything stacks and runs full width: copy panels edge to edge,
   images edge to edge, in the reading order image-then-copy for every block.
   ========================================================================== */

@media (max-width: 991px) {
    .sy-intro {
        padding: clamp(44px, 9vw, 72px) var(--sy-gutter);
    }

    .sy-intro-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sy-mosaic-grid {
        height: clamp(240px, 40vw, 340px);
    }

    /*
     * Stacked, but not edge to edge: the cream keeps a small margin either
     * side, and a narrow gap separates it from its image.
     */
    .sy-split {
        grid-template-columns: 1fr;
        gap: clamp(9px, 2.6vw, 15px);
        padding: clamp(9px, 2.6vw, 15px) clamp(10px, 3vw, 18px);
        max-width: none;
    }

    .sy-split--flip {
        grid-template-columns: 1fr;
    }

    /*
     * No reordering. Natural document order already gives copy-then-image for
     * the standard blocks and image-then-copy for the flipped one, which is
     * exactly how the columns read left to right on desktop.
     */
    .sy-split--flip .sy-split-panel,
    .sy-split .sy-split-image {
        order: 0;
    }

    /*
     * align-self is the important line here.
     *
     * The grid inherits align-items:stretch from the desktop rules. Stacked,
     * the image is alone in its row, and neither the absolutely-positioned
     * placeholder nor the height:100% <img> contributes any intrinsic height —
     * so the row collapsed to zero and the aspect-ratio was ignored, because
     * stretch was deciding the block size. Opting out of the stretch lets the
     * ratio set the height from the width instead.
     *
     * min-height is the belt to that braces: if aspect-ratio is ever
     * unsupported or overridden, the cell still has a visible size rather than
     * silently disappearing.
     */
    /*
     * Portrait, not landscape.
     *
     * These images are shot and uploaded at 4:5. Forcing them into a 4:3
     * landscape box on mobile made object-fit centre-crop away the top and
     * bottom of every one — which on a portrait of a person means cropping
     * through the head. Matching the box to the source means no crop at all.
     *
     * align-self:start keeps the ratio in charge of the height: the grid
     * inherits align-items:stretch, and stretch would otherwise decide the
     * block size and collapse the cell.
     */
    .sy-split .sy-split-image {
        align-self: start;
        aspect-ratio: 4 / 5;
        min-height: 220px;
    }

    .sy-split-panel {
        padding: clamp(38px, 9vw, 56px) clamp(20px, 5.5vw, 32px);
        /* The desktop minimum exists to keep the panel level with the image;
           stacked there is nothing to match, so it would just add dead space. */
        min-height: 0;
    }

    /* The rules stay on mobile — they sit inside the panel, so a full-width
       panel gives them more room, not less. Proportionally wider here. */
    .sy-split-panel::before,
    .sy-split-panel::after {
        width: clamp(110px, 48%, 260px);
    }

    .sy-cta {
        margin-top: 0;
    }

    /* The transparent-header fix now applies site-wide from header.css, which
       does not depend on :has() being supported. */
}

@media (max-width: 767px) {
    /* Stacked, not a 3-up strip: at phone width three columns are thumbnails.
       The wide shot leads, the other two sit side by side beneath it. */
    .sy-mosaic-grid {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    /* Same trap as the split image: the grid's rows are auto here, and the
       height:100% <img> gives them nothing to size against. */
    .sy-mosaic-item {
        align-self: start;
        aspect-ratio: 1 / 1;
        min-height: 150px;
    }

    .sy-mosaic-item--1 {
        grid-column: 1 / -1;
        aspect-ratio: 4 / 3;
    }

    .sy-pagehero {
        height: clamp(300px, 56vw, 380px);
    }

    .sy-pagehero-btn {
        font-size: 10px;
        letter-spacing: 2.2px;
        padding: 13px 22px;
        gap: 10px;
    }

    .sy-pagehero-btn::before,
    .sy-pagehero-btn::after {
        width: 12px;
    }

    .sy-intro-heading {
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sy-mosaic-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sy-mosaic-item img {
        transform: none;
    }
}