/*************************
**  Our Tasmania Website
**  locations styles sheet
**  Build V. 0.2
**  Build Notes: the elements that relate to the locations components of the site dark build
**
**********************/


/* ═══════════════════════════════════════════════════
    INTRO
═══════════════════════════════════════════════════ */
.spiintro-block {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    position: relative; overflow: hidden;
}
.spiintro-block::after {
    content: '';
    position: absolute; bottom: -60px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,158,58,.06) 0%, transparent 70%);
    pointer-events: none;
}
.spiintro-block__overline {
    font-family: var(--font-mono);
    font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--emerald); margin-bottom: 1rem; display: block;
}
.spiintro-block__title {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 1rem;
    line-height: 1.2;
}
.spiintro-block__body {
    color: var(--ink-2); font-size: .925rem;
    line-height: 1.85; max-width: 1000px;
}
/* ═══════════════════════════════════════════════════
    CATEGORY CARDS — match species cat-grid exactly
    but use location category colour vars
═══════════════════════════════════════════════════ */
.cat-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem;
}
@media (max-width: 991px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: var(--radius-lg);
    text-decoration: none; position: relative; overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    background: var(--bg-card);
}
.cat-card::before {
    content: ''; position: absolute; inset: 0;
    background: var(--cat-tint, rgba(90,158,58,.05));
    opacity: 0; transition: opacity .25s;
}
.cat-card:hover { border-color: var(--cat-border, var(--amber-rule)); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.cat-card:hover::before { opacity: 1; }
.cat-card__icon { font-size: 1.5rem; color: var(--cat-color, var(--amber)); margin-bottom: 1rem; position: relative; }
.cat-card__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; position: relative; }
.cat-card__count { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); position: relative; }

/* Location category colour tokens --- needs to be added to as more locations types come online*/
.cat-beaches    { --cat-color: #5ab4c8; --cat-tint: rgba(26,58,74,.3);   --cat-border: rgba(90,180,200,.3); }
.cat-national    { --cat-color: #4aaf80; --cat-tint: rgba(26,48,32,.3);   --cat-border: rgba(74,175,128,.3); }
.cat-townships { --cat-color: #c8a03a; --cat-tint: rgba(58,42,16,.3);   --cat-border: rgba(200,160,58,.3); }
.cat-cities   { --cat-color: #6abf5e; --cat-tint: rgba(42,58,26,.3);   --cat-border: rgba(106,191,94,.3); }
.cat-mountains  { --cat-color: #c85858; --cat-tint: rgba(58,26,26,.3);   --cat-border: rgba(200,88,88,.3);  }


/* ═══════════════════════════════════════════════════
   FEATURED LOCATION — content section (no card)
═══════════════════════════════════════════════════ */

/* ── Two-column layout: left=content+map, right=images ── */

/* ── Left column ────────────────────────────────── */

/* Location type chip */

/* warm gradient rule */

/* ── 2×2 stat links ── */

/* CTA */

/* ── Map — full-width strip below the two-column content ── */

/* ── Right column: scattered photo composition ──── */

/* Outer container — no box, just a sized stage */

/* Every photo: absolutely positioned, rounded, shadowed */

/* ── Hero: large, top-left, slight counter-clockwise tilt ── */

/* ── Photo B: smaller, bottom-left, clockwise tilt ── */

/* ── Photo C: smaller, bottom-right, slight counter-clockwise ── */

/* bottom gradient veil */

/* label bottom-left */

/* "View Gallery" pill — hero only, reveals on hover */

/* ── Responsive ─────────────────────────────── */
.location-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .32rem .85rem;
    border-radius: 100px;
    color: var(--white);
    /* --survey deepened: white on #3a9e7d was 3.3:1 */
    background: #2a7359;
}
/*.sp-card__veil-top {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( to bottom, rgba(8,12,10,.95) 0%, rgba(8,12,10,.60) 22%, rgba(8,12,10,.15) 38%, transparent 48% );
    transition: background .555s ease !important;
}
a:hover .sp-card__veil-top{
    background: linear-gradient( to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.60) 22%, rgba(255,255,255,.15) 38%, transparent 48% );
    transition: background .555s ease !important;
}
*/
.sp-card__veil-top {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Dark gradient starts visible */
    background: linear-gradient( to bottom, rgba(8,12,10,.95) 0%, rgba(8,12,10,.60) 22%, rgba(8,12,10,.15) 38%, transparent 48% );
}

.sp-card__veil-top::after {
    content: "";
    position: absolute;
    inset: 0;
    /* White gradient starts invisible */
    background: linear-gradient( to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.60) 22%, rgba(255,255,255,.15) 38%, transparent 48% );
    opacity: 0;
    transition: opacity .555s ease;
}

/* Fade in the white gradient on hover */
a:hover .sp-card__veil-top::after {
    opacity: 1;
}
.species-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .26rem .45rem .14rem;
    border-radius: 100px;
    color: var(--white);
    /* Sits at the top of the card, above where the veil starts: an 18% tint
       left white text at the photo's mercy. Same solid green as .location-pill. */
    background: #2a7359;
}
/* ═══════════════════════════════════════════════════
   AMENITIES GRID
═══════════════════════════════════════════════════ */
.amenity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1199px) { .amenity-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .amenity-grid { grid-template-columns: 1fr; } }

.amenity-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.35rem;
    display: flex; flex-direction: column; gap: .85rem;
    position: relative; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
}
/* teal left-edge accent line — scales in on hover */
.amenity-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--teal);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
/* subtle radial teal glow in corner */
.amenity-card::after {
    content: '';
    position: absolute; bottom: -40px; right: -40px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(90,180,200,.06) 0%, transparent 70%);
    pointer-events: none; transition: opacity .3s;
    opacity: 0;
}
.amenity-card:hover {
    border-color: var(--teal-rule);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    background: var(--bg-2);
}
.amenity-card:hover::before { transform: scaleY(1); }
.amenity-card:hover::after  { opacity: 1; }

/* Icon square */
.amenity-card__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--teal-dim); 
    border-radius: var(--radius); color: var(--teal); font-size: 1.05rem;
    transition: background .2s, box-shadow .2s;
}
.amenity-card:hover .amenity-card__icon {
    background: rgba(90,180,200,.2);
    box-shadow: 0 0 16px var(--teal-dim);
}

/* Text block */
.amenity-card__body { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.amenity-card__title {
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 700; color: var(--ink);
    line-height: 1.2; margin: 0;
}
.amenity-card__summary {
    font-size: .78rem; font-weight: 300;
    color: var(--ink-3); line-height: 1.7; margin: 0;
    flex: 1;
}

/* Optional details link */
.amenity-card__link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--teal); text-decoration: none;
    border-bottom: 1px solid var(--teal-rule); padding-bottom: 1px;
    margin-top: .25rem; align-self: flex-start;
    transition: color .15s, border-color .15s;
}
.amenity-card__link:hover { color: #8fd6e8; border-color: #8fd6e8; }
.amenity-card__link i { transition: transform .2s; }
.amenity-card__link:hover i { transform: translateX(3px); }
.sp-card__type-badge{
    color: var(--emerald);
    border: 1px solid var(--emerald-rule);
    background: var(--emerald-dim);
    padding: 0.35rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
}
a:hover .sp-card__type-badge{
    color: var(--emerald-xdrk);
    border: 1px solid var(--emerald-xdrk);
}

/* Location video gallery: isolated from the species video-card component. */
.location-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.location-video-card {
    min-width: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-card) 99%, var(--ink));
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    transition: transform .25s ease, box-shadow .25s ease;
}

.location-video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.location-video-card .vid-card__thumb {
    aspect-ratio: 16 / 9;
}

.location-video-card__media {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.location-video-card__body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.2rem 1.25rem 1.3rem;
}

.location-video-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.location-video-card__desc {
    margin: 0;
    color: var(--ink-3);
    font-size: .85rem;
    line-height: 1.7;
}

.location-video-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .06em;
}

.location-video-card__meta a {
    color: inherit;
    text-decoration: none;
}

.location-video-card__meta a:hover { color: var(--teal); }

.location-video-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding-top: .15rem;
}

.location-video-card__actions .vid-btn {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

@media (max-width: 767px) {
    .location-video-grid { grid-template-columns: 1fr; }
}

/* Light theme: field-guide surfaces keep the locations index warm and legible. */
html[data-theme="light"] .amenity-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .location-video-card,
html[data-theme="light"] .spiintro-block {
    background: var(--bg-card);

    color: var(--ink);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}

html[data-theme="light"] .amenity-card__summary {
    color: var(--ink-2);
}

/* These badges sit above photography, so their contrast is self-contained. */
html[data-theme="light"] .location-pill {
    color: #f7f2e8;
    background: #24271f;
}

html[data-theme="light"] .species-pill {
    color: #f7f2e8;
    background: #24271f;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED LOCATION — immersive banner
   The location's own photograph carries the section, the way the site already
   does at the top of every page. This replaces a two-column block plus a
   detached full-width map: the map showed one pin beside a photograph of the
   same place, and it was the main reason the section read as three loose
   pieces rather than one feature.
   ═══════════════════════════════════════════════════════════════════════════ */
.feat-banner {
    position: relative; overflow: hidden;
    min-height: 30rem; display: flex; align-items: flex-end;
    border-radius: var(--radius-xl);
    background-image: var(--shot, none);
    background-size: cover; background-position: center 45%;
    background-color: var(--bg-2);
}

/* Two gradients: one lifting the text off the foot of the image, one darkening
   the left so the copy holds up whatever the photograph is doing there. The
   colours are literal rather than tokens because the veil sits over a photo in
   both themes — it must stay dark on parchment too. */
.feat-banner__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,   rgba(14,16,15,.96) 0%, rgba(14,16,15,.72) 42%, rgba(14,16,15,.18) 78%),
        linear-gradient(to right, rgba(14,16,15,.72) 0%, transparent 62%);
}

.feat-banner__body { position: relative; z-index: 1; padding: 2.75rem; max-width: 46rem; }

/* Everything inside the banner sits on the dark veil in BOTH themes, so the
   colours here are literal. --emerald-lt would flip to #3f7428 on light and
   drop from 8.7:1 to 3.4:1 against the veil — a token doing exactly the
   wrong thing because the surface underneath never changes. */
.feat-banner__eyebrow {
    display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem;
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .22em;
    text-transform: uppercase; color: #7ec257;
}
.feat-banner__eyebrow span { width: 22px; height: 1px; background: #7ec257; flex: none; }

.feat-banner__title {
    font-family: var(--font-display); font-size: clamp(2.4rem, 5.5vw, 4.25rem);
    font-weight: 900; line-height: .95; letter-spacing: -.04em;
    color: #f7f2e8; margin-bottom: .55rem;
}
.feat-banner__region {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(247,242,232,.72); margin-bottom: 1.1rem;
}
.feat-banner__type {
    padding: .18rem .6rem; border-radius: 100px;
    background: rgba(90,180,200,.18); color: #8fd4e4;
}
.feat-banner__desc {
    max-width: 40rem; color: rgba(247,242,232,.86);
    font-size: .95rem; line-height: 1.8; margin-bottom: 1.75rem;
}

.feat-banner__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.9rem; }
.feat-stat {
    display: flex; flex-direction: column; gap: .15rem;
    min-width: 6.2rem; padding: .7rem .95rem;
    background: rgba(247,242,232,.08); border-radius: var(--radius);
    text-decoration: none; transition: background .2s, transform .2s;
}
.feat-stat:hover { background: rgba(90,158,58,.30); transform: translateY(-2px); }
.feat-stat__n {
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
    color: #f7f2e8; line-height: 1;
}
.feat-stat__l {
    font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(247,242,232,.66);
}
.feat-stat__l i { margin-right: .25rem; }

.feat-banner__cta {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .85rem 1.6rem; border-radius: var(--radius);
    background: #5a9e3a; color: #0e100f;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700; text-decoration: none;
    transition: background .2s, transform .2s;
}
.feat-banner__cta:hover { background: #7ec257; color: #0e100f; transform: translateY(-1px); }
.feat-banner .feat-banner__cta,
.feat-banner .feat-banner__cta:hover { color: #0e100f; }

@media (max-width: 991px) {
    .feat-banner__body { padding: 1.75rem; }
}
@media (max-width: 575px) {
    .feat-banner { min-height: 26rem; }
    .feat-stat { flex: 1 1 45%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .feat-stat, .feat-banner__cta { transition: none; }
    .feat-stat:hover, .feat-banner__cta:hover { transform: none; }
}

/* ── Location map ──
   Used by view-location.php and view-location-amenity.php. Restored after the old
   featured-location layout was removed: without a height the map rendered into a
   0px box. */
.feat-loc__map { border-radius: var(--radius-lg); overflow: hidden; }
#feat-map {
    height: 360px; width: 100%;
    display: block;
    filter: hue-rotate(1deg) saturate(0.8) brightness(0.6);
}
/* The dimming suits the dark page; on the ivory ground it only muddies the map. */
html[data-theme="light"] #feat-map { filter: none; }

/* ── Nearby Snorkelling (view-location.php) ──
   The card pills sit on the photo, so they get a near-opaque dark backing in
   both themes and a light tint of the difficulty colour; they were 9% fills
   of the bright colour, 1.1–1.6:1 on light photos. */
.location-pill--snorkel,
.location-pill--beginner,
.location-pill--intermediate,
.location-pill--advanced { background: rgba(14,16,15,.86); }
html[data-theme="light"] .location-pill--snorkel,
html[data-theme="light"] .location-pill--beginner,
html[data-theme="light"] .location-pill--intermediate,
html[data-theme="light"] .location-pill--advanced { background: #24271f; }
.location-pill--snorkel      { color: #7fd6e2; }
.location-pill--beginner     { color: #86dd86; }
.location-pill--intermediate { color: #e4bf5c; }
.location-pill--advanced     { color: #f09a9a; }

.ruled--tight { gap: .75rem; }
.ruled__icon--snorkel { color: #3eb8c8; }
.loc-snorkel-placeholder {
    width: 100%; height: 100%; background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    color: #3eb8c8; font-size: 2rem;
}
.sp-card__img.loc-card-placeholder {
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 2rem;
}
.loc-snorkel-more { text-align: center; margin-top: 2rem; }
.btn-ghost--snorkel { color: #3eb8c8; }
/* Bright teal is 1.7:1 on ivory; the deeper teal the snorkelling map uses. */
html[data-theme="light"] .ruled__icon--snorkel,
html[data-theme="light"] .loc-snorkel-placeholder,
html[data-theme="light"] .btn-ghost--snorkel:not(:hover) { color: #17626c; }

/* ── Location view tiles ──
   Six views since Amenities joined the row; .survey-actions is a five-column
   grid in styles-x-survey.css, which loads after this file, so the override
   needs the doubled class to win. */
.survey-actions.survey-actions--six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1199px) { .survey-actions.survey-actions--six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .survey-actions.survey-actions--six { grid-template-columns: repeat(2, 1fr); } }

.amenity-empty { color: var(--ink-2); font-size: .95rem; }

/* ── List note ──
   A short caveat above a list. A tint and a radius, no edge; the icon is a
   filled disc centred against the first line of text. */
.list-note {
    display: flex; align-items: center; gap: .9rem;
    background: var(--emerald-dim);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.list-note__icon {
    width: 32px; height: 32px; flex-shrink: 0;
    margin-top: auto; margin-bottom: auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--emerald-dim);
    color: var(--emerald-lt); font-size: .8rem;
    padding-top: 3px;
}
.list-note__text {
    margin: 0;
    color: var(--ink-2); font-size: .85rem; line-height: 1.7;
}
.list-note__text a { color: var(--emerald); font-weight: 600; text-decoration: none; }
.list-note__text a:hover { text-decoration: underline; }
html[data-theme="light"] .list-note__icon { color: var(--emerald-drk); }
html[data-theme="light"] .list-note__text a { color: var(--emerald-drk); }