/* ===========================
   STOCKIST FINDER — dance line
   File: css/pages/stockists.css
=========================== */

.stk-section {
    background: #f3f0e7;
    color: #18120f;
    font-family: var(--font-heading, 'Special Elite', monospace);
    padding: clamp(2rem, 6vw, 4rem) 1.25rem 3rem;
    min-height: 60vh;
}

.stk-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Back link — a way out of the find-a-retailer page (reached from a dance PDP,
   the nav, or the landing). */
.stk-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.4rem;
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: rgba(24, 18, 15, 0.7);
    text-decoration: none;
}
@media (hover: hover) {
    .stk-back:hover { color: #b9667f; text-decoration: underline; }
}

.stk-head {
    text-align: center;
    margin-bottom: clamp(2rem, 6vw, 3rem);
}

.stk-overline {
    display: block;
    font-size: clamp(9px, 2vw, 12px);
    letter-spacing: 0.35em;
    text-transform: lowercase;
    color: rgba(24, 18, 15, 0.8);
    margin-bottom: 0.75rem;
}

.stk-title {
    font-family: inherit;
    font-weight: normal;
    font-size: clamp(1.8rem, 7vw, 3rem);
    text-transform: lowercase;
    margin: 0 0 0.75rem;
}

.stk-sub {
    max-width: 540px;
    margin: 0 auto;
    font-size: clamp(0.85rem, 2.8vw, 1rem);
    line-height: 1.6;
    color: rgba(24, 18, 15, 0.8);
}

.stk-group { margin-bottom: clamp(1.75rem, 5vw, 2.5rem); }

.stk-group__title {
    font-family: inherit;
    font-weight: normal;
    font-size: clamp(1rem, 3.4vw, 1.3rem);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid #e0a0b4;
    display: inline-block;
    padding-bottom: 2px;
    margin: 0 0 1rem;
}

.stk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

@media (min-width: 600px) {
    .stk-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .stk-grid { grid-template-columns: repeat(3, 1fr); }
}

.stk-card {
    border: 1px solid rgba(24, 18, 15, 0.18);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: #faf8f3;
}

.stk-card__name {
    font-family: inherit;
    font-weight: normal;
    font-size: 1rem;
    text-transform: lowercase;
    margin: 0 0 0.35rem;
}

.stk-card__addr {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(24, 18, 15, 0.8);
    overflow-wrap: break-word;   /* long store name / email can't clip the card */
}

.stk-card__links {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;   /* keep wrapped tel / website links a thumb apart */
}

.stk-card__link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 44px;
    color: #b9667f;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

@media (hover: hover) {
    .stk-card__link:hover { text-decoration: underline; }
}

.stk-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(24, 18, 15, 0.8);
}

.stk-empty a { color: #b9667f; }

/* Become-a-stockist strip */
.stk-retailer {
    margin-top: clamp(2.5rem, 7vw, 4rem);
    padding: clamp(1.5rem, 5vw, 2.25rem);
    background: #18120f;
    border-radius: 12px;
    text-align: center;
}

.stk-retailer__text {
    margin: 0 0 1rem;
    color: #f3f0e7;
    font-size: clamp(0.95rem, 3vw, 1.15rem);
}

.stk-retailer__btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.75rem;
    background: #e0a0b4;
    color: #18120f;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    -webkit-transition: background 0.2s ease, -webkit-transform 0.12s ease;
    transition: background 0.2s ease, transform 0.12s ease;
}

@media (hover: hover) {
    .stk-retailer__btn:hover {
        background: #b9667f;
        color: #f3f0e7;
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
}

/* ============================================================
   CARD POLISH — equal heights, actions pinned to the bottom
   Cards carry different amounts of address and a variable number
   of links, so a plain grid left them ragged and bottom-aligned
   nothing. Stretch them and push the action row down.
============================================================ */
.stk-grid { align-items: stretch; }

.stk-card {
    display: flex;
    flex-direction: column;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Address takes the slack so the links always sit on the baseline */
.stk-card__addr { flex: 1 1 auto; }

.stk-card__links {
    margin-top: auto;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(24, 18, 15, 0.08);
}

@media (hover: hover) {
    .stk-card:hover {
        border-color: #e0a0b4;                       /* the dance accent */
        box-shadow: 0 4px 14px rgba(24, 18, 15, 0.07);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stk-card { transition: none; }
    .stk-card:hover { transform: none; }
}

/* Directions reads as the quieter, secondary action */
.stk-card__link--dir { color: rgba(24, 18, 15, 0.55); }
@media (hover: hover) {
    .stk-card__link--dir:hover { color: #b9667f; }
}


/* ============================================================
   STOREFRONT IMAGE
   A photo and a logo are different shapes, so the image is
   CONTAINED on a neutral tile rather than cropped — a logo keeps
   its whitespace, a photo keeps its whole frame. No image falls
   back to a monogram so the grid never looks half-finished.
============================================================ */
.stk-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    margin: -1rem -1.1rem 0.75rem;   /* bleed to the card edges */
    border-radius: 10px 10px 0 0;
    background: #f2efe9;
    overflow: hidden;
}

.stk-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;             /* never crop a logo's edges */
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Monogram fallback — the dance accent, quiet enough not to shout */
.stk-card__media--mono {
    background: linear-gradient(160deg, #f7e7ec 0%, #f2efe9 100%);
}

.stk-card__mono {
    font-family: inherit;
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: 0.12em;
    color: rgba(185, 102, 127, 0.55);
    user-select: none;
}


/* ============================================================
   MAP HEADER — "carried across canada"
   Decorative, not a finder: it answers "how far does the line
   reach?" at a glance and hands the actual looking-up to the
   cards below. Everything lives in ONE inline SVG so the
   coastline, pins, arrows and photo postcards share a
   coordinate space and can never drift out of register.
============================================================ */
/* Canada is ~1.5:1, so at the container's full 1000px the map alone would
   stand taller than the viewport and push every retailer below the fold.
   Capped and centred, it reads as a header instead of a page. */
.cmap {
    max-width: 680px;
    margin: 0 auto clamp(1.5rem, 5vw, 2.5rem);
}

.cmap__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Warm paper tone rather than the rose — the land is the quiet
   backdrop, and the pins need to be the only loud thing on it.
   The inked outline is what sells the drawn look: a soft, slightly
   heavy line with round joins, over a spline that has already had
   every corner rounded off and a small wobble added in Python. */
.cmap__land path {
    fill: #e6dfd0;
    stroke: rgba(24, 18, 15, 0.42);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Provincial/territorial borders — SMALL SCREENS ONLY.
   Of four treatments reviewed, the owner picked full hairline borders, then
   scoped them to mobile: shrink the map to phone width and the silhouette
   loses the internal landmarks that make it readable, so the borders earn
   their keep. At full size the pins and the city labels already do that job
   and the lines become noise, so they go away — see the min-width rule below.

   vector-effect is load-bearing, not decoration. The viewBox is 1000 units
   wide and .cmap caps at 680px, so a plain stroke-width scales WITH the map:
   1 unit renders ~0.68px on desktop but ~0.36px on a 360px phone — i.e.
   faintest exactly where it is needed most, which is backwards. Pinning the
   stroke to device pixels makes the line the same weight at every size, so
   the treatment reads on a phone the way it reads in a mockup.

   Same ink family as the coastline stroke above, at under half its opacity:
   subordinate on purpose, so they organise the shape without competing with
   the coastline or with the pins, which stay the only loud thing on this map.
   No dark-mode variant here — one fixed editorial palette, same as .cmap. */
.cmap__borders path {
    fill: none;
    stroke: rgba(24, 18, 15, 0.24);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* 600px is where .stk-grid goes two-up and the map has grown to roughly 85%
   of its 680px ceiling — big enough that the pins carry it unaided. */
@media (min-width: 600px) {
    .cmap__borders { display: none; }
}

/* Each dot is a link. The visible dot stays small while an invisible
   disc gives it a finger-sized hit area — the same reason the cards
   below use a 44px target. */
.cmap__pin { cursor: pointer; }

.cmap__hit { fill: transparent; }

.cmap__dot {
    fill: #b9667f;
    stroke: #f3f0e7;
    stroke-width: 1.6;
    transition: fill 140ms ease, r 140ms ease, stroke 140ms ease;
}

/* Illuminated — set from JS while the store's postcard is hovered/focused, so
   the customer can see WHERE that shop is. Grows, darkens and takes an accent
   ring + soft glow so it stands out from the field of dots. */
.cmap__dot--lit {
    fill: #18120f;
    stroke: #e0a0b4;
    stroke-width: 3;
    r: 9;
    filter: drop-shadow(0 0 5px rgba(224, 160, 180, 0.9));
}
.cmap__dot--approx.cmap__dot--lit {
    fill: #f3f0e7;             /* an approximate dot stays hollow, just lit */
    stroke: #b9667f;
}

/* Placed from its province because we have no coordinates for it. Hollow, so
   the map isn't claiming a precision it hasn't got — and so the operator can
   see at a glance that a geocode_stockists run is due. */
.cmap__dot--approx {
    fill: #f3f0e7;
    stroke: #b9667f;
    stroke-width: 2;
}

@media (hover: hover) {
    .cmap__pin:hover .cmap__dot { fill: #18120f; r: 7.5; }
    .cmap__pin:hover .cmap__dot--approx { stroke: #18120f; }
}

.cmap__pin:focus-visible .cmap__dot {
    fill: #18120f;
    stroke: #18120f;
    stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
    .cmap__dot { transition: none; }
}

/* Arriving from a dot: the card says so for a moment rather than
   leaving you to work out which of thirty cards you landed on.
   scroll-margin clears the fixed nav. */
.stk-card:target {
    border-color: #b9667f;
    box-shadow: 0 0 0 2px rgba(185, 102, 127, 0.35);
    scroll-margin-top: 90px;
}

/* Arrow from a postcard down to its dot. The line and its head share the
   same muted ink as the coastline, so they read as part of the drawing. */
.cmap__arrow {
    fill: none;
    stroke: rgba(24, 18, 15, 0.5);
    stroke-width: 1.5;
}
.cmap__arrowhead { fill: rgba(24, 18, 15, 0.5); }

/* Each postcard links to its store's card, exactly like the dot does. The
   hover state is carried on the FRAME (accent stroke + a deeper shadow), never
   a CSS transform: the tilt lives in the SVG rotate() attribute, and a CSS
   transform would override it and snap the card upright. */
.cmap__pc-link { cursor: pointer; }

.cmap__pc-frame { transition: stroke 140ms ease, filter 140ms ease; }

@media (hover: hover) {
    .cmap__pc-link:hover .cmap__pc-frame {
        stroke: #b9667f;
        stroke-width: 2;
        filter: drop-shadow(0 5px 10px rgba(24, 18, 15, 0.3));
    }
}

.cmap__pc-link:focus-visible .cmap__pc-frame {
    stroke: #b9667f;
    stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
    .cmap__pc-frame { transition: none; }
}

/* Postcards — a framed storefront photo pinned to the empty north. The frame
   is warm paper with a soft drop shadow, so it lifts off the map like a real
   print. Whatever the tilt, the photo is clipped to a rectangle inside the
   border and the store name sits on the strip beneath it. */
.cmap__pc-frame {
    fill: #faf8f3;
    stroke: rgba(24, 18, 15, 0.14);
    stroke-width: 1;
    filter: drop-shadow(0 3px 6px rgba(24, 18, 15, 0.22));
}

/* Mat behind the photo — the paper tone, so a contained image's letterbox
   reads as a border. Monogram fallback sits on the same mat. */
.cmap__pc-mat { fill: #f2e5e9; }

.cmap__pc-mono {
    font-family: var(--font-heading, 'Special Elite', monospace);
    letter-spacing: 0.1em;
    fill: rgba(185, 102, 127, 0.7);        /* font-size is per-card, set inline */
}

.cmap__cap {
    margin-top: 0.5rem;
    text-align: center;
    font-size: clamp(0.8rem, 2.6vw, 0.95rem);
    letter-spacing: 0.1em;
    color: rgba(24, 18, 15, 0.7);
}

/* A clickable dot nobody thinks to click is a dot that does nothing. */
.cmap__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(24, 18, 15, 0.45);
}

/* On a phone the postcards and their arrows have nowhere to go — a 150-unit
   frame on a 375px map would be a stamp, and the arrows would tangle — so
   they're dropped and the clean map carries the header. Because the cards sit
   INSIDE the map, hiding them needs no height correction: the viewBox is the
   same with or without them. */
@media (max-width: 700px) {
    .cmap__arrow,
    .cmap__pc { display: none; }
}


/* ============================================================
   DENSITY PASS
   The cards carried a lot of air: a 3:2 tile (mostly empty on a
   monogram), generous paddings, and a 44px tap target on every
   link even with a mouse. One --stk-pad drives both the padding
   and the tile's negative-margin bleed so they can't drift apart.
============================================================ */
.stk-card {
    --stk-pad-y: 0.8rem;
    --stk-pad-x: 0.9rem;
    padding: var(--stk-pad-y) var(--stk-pad-x);
}

.stk-card__media {
    /* 12/5, not 16/9. These are WORDMARKS: measured across the live list, ten of
       twelve logos run 2.2:1 to 5.1:1, so `contain` limits them by WIDTH and the
       leftover tile height is simply dead space — a 3.85:1 logo filled 46% of a
       16/9 tile. 2.4:1 trims that without shrinking anything: at a 326px column
       the tile is 136 tall, which is still >= the height the two near-square
       logos rendered at before, so every logo on the page gets bigger or holds.
       Going shorter still would start shrinking those two. */
    aspect-ratio: 12 / 5;
    margin: calc(var(--stk-pad-y) * -1) calc(var(--stk-pad-x) * -1) 0.6rem;
}

.stk-card__name   { margin-bottom: 0.2rem; }
.stk-card__addr   { margin-bottom: 0.35rem; line-height: 1.45; font-size: 0.82rem; }
.stk-card__links  { gap: 0.15rem 0.8rem; padding-top: 0.2rem; }

/* 44px is a TOUCH-target rule. With a mouse it's just wasted height,
   and three links then stack into a tall block. */
@media (pointer: fine) {
    .stk-card__link { min-height: 30px; }
}

.stk-grid  { gap: 0.7rem; }
.stk-group { margin-bottom: clamp(1.25rem, 3.5vw, 1.75rem); }

/* Column COUNT is what sets logo size here, so it is bounded by a minimum width
   rather than fixed per breakpoint.

   A wordmark in a `contain` tile is limited by the column, not the tile height —
   so the old fixed fourth column at 1200px shrank every logo on the page by 25%
   to save horizontal space the logos were not wasting. auto-fill with a 270px
   floor keeps the same column count as before at every width where three fitted,
   adds a fourth only once the cards would still be wider than they are today,
   and never lets a card fall below 270px. */
@media (min-width: 900px) {
    .stk-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}