/* ============================================================
   SGL Markets — "Our Markets" grid + cards
   Namespaced .sgl- to coexist with The7. Modal styles in modal.css (#6).
   ============================================================ */

.sgl-markets {
    --sgl-blue: #16384f;
    --sgl-yellow: #f4c020;
    --sgl-ink: #1c2b36;
    --sgl-cond: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 48px 20px 64px;
    /* No background here — the texture lives on #page so it covers the whole
       content area (above + below this section). */
    background: transparent;
}
.sgl-markets__inner {
    max-width: 1340px;
    margin: 0 auto;
}

/* Sticky footer + contain the full-bleed.
   The custom [sgc_footer] is appended (via wp_footer) AFTER The7's #page,
   which collapses to its content height — so on tall windows the footer
   floats with a gap below it. Make the body a flex column and let #page grow
   to fill the viewport, pinning the footer to the bottom. overflow-x:clip
   absorbs the full-bleed section's edge bleed (no horizontal scroll) without
   creating a scroll container. This file only loads on pages with the
   [sgc_market_list] shortcode, so it's scoped to the markets pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
}
body > #page {
    flex: 1 0 auto;
    /* The nav's texture, on the whole content area (full content width + grows
       with flex), so it fills above and below the markets content — no white
       bars and no full-bleed needed. The teal footers sit on top with their
       own background. */
    background: #fff url("/wp-content/uploads/2022/12/Texture_HomePage.png") repeat 50% 50%;
    /* #page is a grid; when it flex-grows taller than its content, pack the
       rows to the top so the extra space lands BELOW the content (textured),
       not above it (which pushed the heading down on big screens). */
    align-content: start;
}

/* Heading is intentionally NOT rendered by the shortcode — it's added per-page
   via the page builder (more design flexibility + lets the shortcode be reused
   in other contexts). */

/* Grid: 7 tall cards across on desktop, collapsing down to 2 on mobile */
.sgl-markets__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}

/* Card (a button so it's keyboard-accessible; resets button chrome) */
.sgl-market-card {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
    /* The whole card lifts on hover (see __img / __overlay rules below). Per
       the design, the card's top edge rises above the row line — so the lift
       is on the card itself, not a zoom of the image inside its frame. */
    transition: transform .35s ease;
    will-change: transform;
}

.sgl-market-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 432 / 1122;   /* native proportion of the uploaded photos */
    overflow: hidden;
    border-radius: 2px;
    background: #2a2a2a;
}

.sgl-market-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Lock the top, center horizontally: when the box is shorter than the
       photo, crop from the bottom so the subject's top stays in view. */
    object-position: 50% 0;
}

/* Blue tint at rest; clears on hover (see hover rule below) */
.sgl-market-card__overlay {
    position: absolute;
    inset: 0;
    background: var(--sgl-blue);
    opacity: .38;
    transition: opacity .35s ease;
}

/* …and the whole card rises slightly so its top edge breaks the row line */
.sgl-market-card:hover,
.sgl-market-card:focus-visible {
    transform: translateY(-14px);
}
.sgl-market-card:hover .sgl-market-card__overlay,
.sgl-market-card:focus-visible .sgl-market-card__overlay {
    opacity: 0;
}
.sgl-market-card:focus-visible {
    outline: 3px solid var(--sgl-yellow);
    outline-offset: 2px;
}

/* "New" flag — pennant graphic (newflag.svg) hanging from the top-left */
.sgl-market-card__new {
    position: absolute;
    top: 0;
    left: 14px;
    z-index: 2;
    width: 36px;
    height: auto;
    display: block;
}

/* Label over the bottom of the image */
.sgl-market-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;                 /* triple the name→arrow space */
    padding: 40px 8px 32px;    /* double the arrow→bottom space (was 16px) */
    background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

.sgl-market-card__name {
    color: #fff;
    font-family: var(--sgl-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 17px;
    line-height: 1.1;
    text-align: center;
    /* Reserve two lines so names line up at the top whether they wrap or not. */
    min-height: 2.2em;
}

.sgl-market-card__arrow {
    color: var(--sgl-yellow);
    font-size: 20px;
    line-height: 1;
    transition: transform .3s ease;
}
.sgl-market-card:hover .sgl-market-card__arrow,
.sgl-market-card:focus-visible .sgl-market-card__arrow {
    transform: translateX(5px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sgl-markets__grid { grid-template-columns: repeat(4, 1fr); }
    .sgl-market-card__media { aspect-ratio: 1 / 1.6; }
}
@media (max-width: 760px) {
    .sgl-markets__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .sgl-markets__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sgl-market-card__media { aspect-ratio: 1 / 1.5; }
}

/* ============================================================
   Modal (rendered as a sibling of .sgl-markets, so vars are
   re-declared here). Mobile bottom-sheet behaviour is in #7.
   ============================================================ */
.sgl-modal {
    --sgl-yellow: #f4c020;
    --sgl-cond: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sgl-modal[hidden] { display: none; }
body.sgl-modal-open { overflow: hidden; }

.sgl-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .8);
}

.sgl-modal__dialog {
    position: relative;
    z-index: 1;
    /* Grid (not flex) so the row height is established by the info/team content
       first; the image cell then stretches to that height and aspect-ratio
       derives its width. In a row flexbox the main axis (width) is sized before
       the cross axis, so aspect-ratio can't transfer a stretched height back to
       width — grid can. */
    display: grid;
    /* Middle (info) track is content-sized, not 1fr, so a short title doesn't
       leave a gap before the team column. The dialog shrink-wraps (fit-content)
       and stays centered; max-width caps it so long titles wrap instead. */
    grid-template-columns: auto auto auto;
    align-items: start;        /* info + team sit at the top; image opts into stretch */
    gap: 40px;
    width: fit-content;
    max-width: 1000px;
    max-height: 88vh;
    padding: 48px;
    background: #0e0f11;
    color: #fff;
    border-radius: 4px;
    overflow: auto;
}

.sgl-modal__close {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.sgl-modal__close:hover { opacity: 1; }

/* Column 1 matches column 2 (the info block): align-self stretch sets the
   height reliably from the info row; the explicit width below bootstraps the
   info column so the title wraps. The modal JS then refines the width to
   height × (432/1122) so the photo keeps its native proportion (shown whole,
   narrow + tall). We can't use aspect-ratio here — in a grid auto-track it
   resolves circularly and collapses the dialog height. */
.sgl-modal__image {
    align-self: stretch;
    width: 160px;
    position: relative;
}
/* Absolutely positioned so the photo's natural pixels don't become the flex
   basis (which would let the image dictate the row height). The wrapper's
   width is derived from its stretched height via aspect-ratio; the img fills. */
.sgl-modal__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0; /* lock top, center horizontally (matches cards) */
    display: block;
    border-radius: 2px;
}

.sgl-modal__info { flex: 1 1 auto; min-width: 0; }
/* Scoped under .sgl-modal__dialog so the white wins over The7's global h3
   heading color (#333), which the bare class selector lost to. */
.sgl-modal__dialog .sgl-modal__name {
    font-family: var(--sgl-cond);
    font-size: clamp(64px, 8vw, 112px);
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.975;        /* mimic the big Barlow Condensed headings on /sge-home (78/80) */
    letter-spacing: -0.04em;   /* tighter tracking ("squishier" title) */
    margin: 0 0 28px;
}
/* The address + phone read as one group bracketed by yellow rules: one above
   the address, one below the phone, none between (matches the mockup). The
   group is fit-content so the rules span only the width of the address/phone
   text, not the full info column. */
.sgl-modal__contactgroup {
    width: fit-content;
    padding: 26px 0;
    border-top: 4px solid var(--sgl-yellow);
    border-bottom: 4px solid var(--sgl-yellow);
}
.sgl-modal__address {
    font-family: var(--sgl-cond);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0 0 18px;
}
.sgl-modal__contact {
    font-family: var(--sgl-cond);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.6;
    margin: 0;
}
.sgl-modal__contact a { color: #fff; text-decoration: none; }
.sgl-modal__contact a:hover { color: var(--sgl-yellow); }

.sgl-modal__team { flex: 0 0 26%; align-self: flex-start; }
.sgl-modal__team-title {
    font-family: var(--sgl-cond);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
}
/* Scoped selector so margin:0 wins over The7's list margin-left, which was
   indenting the headshots ~20px past the "Local Team" title. */
.sgl-modal__team .sgl-modal__team-list { list-style: none; margin: 0; padding: 0; }
.sgl-modal__team-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.sgl-modal__team-list img,
.sgl-modal__avatar {
    width: 54px;
    height: 54px;
    border-radius: 0;          /* square headshots, matching the mockup */
    object-fit: cover;
    object-position: 50% 25%;  /* bias toward the top so faces aren't cropped low */
    background: #333;
    flex-shrink: 0;
}
.sgl-modal__member { color: #fff; text-decoration: none; font-size: 16px; }
.sgl-modal__member[href]:hover { color: var(--sgl-yellow); text-decoration: underline; }

/* ── Mobile: modal becomes a bottom sheet that rises + scrolls ── */
@media (max-width: 760px) {
    /* M10: full-screen modal (was a bottom sheet) */
    .sgl-modal { align-items: stretch; padding: 0; }
    .sgl-modal__dialog {
        display: flex;                /* override the desktop grid */
        flex-direction: column;
        gap: 18px;
        width: 100%;                  /* full-width on mobile (override desktop fit-content) */
        max-width: none;
        /* Fill the fixed full-screen .sgl-modal exactly (definite height via
           inset:0) so the dialog itself is the scroll container — content taller
           than the screen scrolls inside it rather than overflowing the modal. */
        height: 100%;
        padding: 56px 0 32px;         /* top clears the close button (banner removed) */
        border-radius: 0;
        overflow-y: auto;             /* scrollbar appears for tall content */
        -webkit-overflow-scrolling: touch;
        animation: sgl-sheet-up .32s ease;
    }
    .sgl-modal__close {
        position: fixed;          /* stay pinned to the viewport while the dialog scrolls */
        top: 10px;
        right: 12px;
        z-index: 3;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .45);
        font-size: 24px;
    }
    /* M11: no banner image on mobile */
    .sgl-modal__image { display: none; }
    /* M12: 40px horizontal padding */
    .sgl-modal__info,
    .sgl-modal__team { flex: none; padding: 0 40px; }
    .sgl-modal__name {
        margin-bottom: 16px;
        overflow-wrap: break-word;    /* M13: long city names wrap naturally */
    }
    /* M14: address block spans the full container width on mobile */
    .sgl-modal__contactgroup { width: auto; }
    .sgl-modal__address { display: block; }
    /* M15: drop the faint divider line below the address block */
    .sgl-modal__team-title {
        margin-top: 8px;
        padding-top: 0;
        border-top: 0;
    }
}

@keyframes sgl-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}