/* Grill'd Shack (pId 68575) — home page overrides.
   Auto-loaded on the widget home (view basename `home`) by base.php.
   Scoped under .gs-about so nothing leaks to other pages/brands.
   Markup: app/Views/themes/ue_override/widgets/68575/custom_about_us.php */

/* ── custom_about_us (vt 41/47) — TWM-style editorial band ─────────── */

/* The band is the page's breathing room, so it gets more vertical rhythm than
   the shared .section[data-widget] default (--s-8). Only the custom_about_us
   sections are touched; every other widget keeps the global rhythm. */
.section[data-widget-view="custom_about_us"] {
    padding: var(--s-12) 0;
}

.gs-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: center;
}

.gs-about__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-4);
}

.gs-about__title {
    margin: 0 0 var(--s-4);
    font-family: var(--font-display);
    font-size: var(--fs-28);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--fg-1);
    letter-spacing: -0.01em;
}

.gs-about__accent {
    color: var(--brand-primary);
}

.gs-about__text,
.gs-about__html {
    margin: 0 0 var(--s-6);
    font-size: var(--fs-16);
    line-height: 1.7;
    color: var(--fg-3);
}

.gs-about__html p {
    margin: 0 0 var(--s-3);
}

.gs-about__html p:last-child {
    margin-bottom: 0;
}

/* Outline pill CTA — matches the reference design. Border follows the text
   colour so it holds up on both the plain and the tinted band. */
.gs-about__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4) var(--s-10);
    border: 1.5px solid currentColor;
    border-radius: var(--r-pill);
    color: var(--fg-1);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-2, .2s) ease, color var(--dur-2, .2s) ease,
                border-color var(--dur-2, .2s) ease;
}

.gs-about__cta:hover,
.gs-about__cta:focus-visible {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary, #fff);
}

/* No image → centred copy block (a band whose row has no image set). */
.gs-about--plain {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.gs-about--plain .gs-about__cta {
    margin: 0 auto;
}

/* ── Desktop: side-by-side, alternating image side ─────────────────── */
@media (min-width: 768px) {
    .gs-about--text-left,
    .gs-about--image-left {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-16);
    }

    /* Media is first in the DOM so mobile stacks image-then-copy; desktop
       reorders it for the text-left band. */
    .gs-about--text-left .gs-about__body  { order: 0; }
    .gs-about--text-left .gs-about__media { order: 1; }

    .gs-about__title {
        font-size: var(--fs-40);
    }

    .gs-about__text,
    .gs-about__html {
        font-size: var(--fs-18);
    }

    .gs-about__media img {
        aspect-ratio: 5 / 4;
        max-height: 520px;
    }
}