/* =============================================================================
   Project: TIU Explore Communities
   Version: 1.0.0
   Release: 4.2 — Container-query responsive layout
   Last Updated: August 2026
   Website: tiurealestate.com

   Description:
   Styles for the Explore Communities interactive map and Explore Panel.

   Copyright © 2026 TIU Real Estate.
   ============================================================================= */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {

    /* Brand Colors */

    --color-primary: #B22222;
    --color-primary-dark: #8F1D1D;
    --color-primary-light: #FBECEC;

    --color-navy: #23364D;

    --color-text: #2B2F36;
    --color-text-light: #6B7280;

    --color-background: #FAF8F5;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;

    /* Typography */

    --font-heading: "Playfair Display", serif;
    --font-body: "Montserrat", sans-serif;

    /* Layout */

    --container-width: 1500px;

    /* Spacing */

    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5.5rem;
    --space-hero: 6rem;

    /* Radius */

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    /* Shadows */

    --shadow-sm: 0 8px 20px rgba(25, 35, 60, .05);
    --shadow-md: 0 18px 45px rgba(25, 35, 60, .10);

    /* Animation */

    --transition-fast: 180ms ease;
    --transition: 280ms ease;

}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    overflow-x: clip;

}

body {

    margin: 0;

    background: var(--color-background);

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: 16px;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

img,
svg,
object {

    display: block;

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.visually-hidden {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;

}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {

    margin: 0;

    color: var(--color-navy);

    font-family: var(--font-heading);

    line-height: 1.2;

}

p {

    margin: 0;

}

/* ==========================================================================
   Iframe embed root (container-aware 65/35 grid at 900px+ component width)
   ========================================================================== */

.tiu-explore-embed {

    container-type: inline-size;

    width: 100%;

    max-width: 100%;

    min-width: 0;

}

.explore-body {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: var(--space-lg);

    width: 100%;

    max-width: 100%;

    min-width: 0;

}

@container (min-width: 900px) {

    .explore-body {

        grid-template-columns: minmax(0, 65%) minmax(0, 35%);

        gap: var(--space-xl);

        align-items: start;

    }

}

/* ==========================================================================
   Hero (scoped to embed — matches backup-working-standalone)
   ========================================================================== */

/* Second compact sizing pass */

.tiu-explore-embed .panel-header.explore-hero {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: var(--space-lg);

    padding-inline: var(--space-md);

    margin-bottom: var(--space-2xl);

}

.tiu-explore-embed .hero-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-lg);

    width: 100%;

    max-width: 36rem;

}

.tiu-explore-embed .hero-eyebrow-line {

    flex: 1;

    height: 1px;

    background: var(--color-border);

}

.tiu-explore-embed .panel-kicker {

    flex-shrink: 0;

    margin: 0;

    color: var(--color-primary);

    font-family: var(--font-body);

    font-size: .85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .22em;

}

.tiu-explore-embed h1.hero-title,
.tiu-explore-embed .hero-title {

    max-width: 18ch;

    margin: 0;

    color: var(--color-navy);

    font-family: var(--font-heading);

    font-size: 2.625rem;

    font-weight: 600;

    line-height: 1.06;

}

.tiu-explore-embed p.hero-subheading,
.tiu-explore-embed .hero-subheading {

    margin: 0;

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 2rem;

    font-style: italic;

    font-weight: 600;

    line-height: 1.08;

}

.tiu-explore-embed .hero-intro,
.tiu-explore-embed .panel-intro {

    max-width: 650px;

    margin-inline: auto;

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: 1.125rem;

    line-height: 1.7;

}

.explore-map-component {

    width: 100%;

    max-width: 100%;

    min-width: 0;

}

/* ==========================================================================
   Map Section
   ========================================================================== */

.map-section {

    width: 100%;

}

.map-instruction {

    margin: var(--space-xs) 0 0;

    text-align: center;

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: .9375rem;

    line-height: 1.5;

}

/* Compact map/card sizing — visual pass */

.map-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    background: #FCFBF9;

    border: 1px solid rgba(35, 54, 77, .035);

    border-radius: 32px;

    box-shadow: 0 10px 26px rgba(35, 54, 77, .036);

    padding: var(--space-sm);

    transition: box-shadow 280ms ease;

}

.map-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(
        ellipse 115% 95% at 50% 46%,
        rgba(235, 228, 218, .14),
        transparent 68%
    );

    pointer-events: none;

    z-index: 0;

}

.map-card:hover {

    box-shadow: 0 11px 28px rgba(35, 54, 77, .042);

}

.explore-map {

    position: relative;

    z-index: 1;

    width: 74%;

    height: auto;

    margin-inline: auto;

    aspect-ratio: 18.831093 / 18.7756;

    border: 0;

}

.explore-map .map-water-context {

    pointer-events: none;

}

.explore-map .county-group {

    pointer-events: none;

}

.explore-map .map-water-fill {

    fill: #A8C4D8;

    fill-opacity: .056;

    stroke: none;

}

.explore-map .map-water-shore {

    fill: none;

    stroke: #94B4C8;

    stroke-opacity: .049;

    stroke-width: .35;

    stroke-linecap: round;

    vector-effect: non-scaling-stroke;

}

.explore-map .county-label {

    pointer-events: none;

    cursor: default;

    fill: #243654;

    opacity: .88;

    font-family: var(--font-body);

    font-size: 0.766px;

    font-weight: 500;

    letter-spacing: .16em;

    text-transform: uppercase;

    user-select: none;

    paint-order: stroke fill;

    transition:
        fill 220ms ease,
        opacity 180ms ease,
        font-size 220ms ease;

}

.explore-map #label-carteret {

    font-size: 0.704px;

    letter-spacing: .16em;

}

.explore-map .county-label.active {

    fill: #B22222;

    font-size: 0.72px;

    letter-spacing: .17em;

    opacity: .84;

}

.explore-map #label-carteret.active {

    font-size: 0.66px;

    letter-spacing: .16em;

}

.explore-map .county-label:focus-visible {

    outline: none;

}

.explore-map .county {

    cursor: pointer;

    pointer-events: visiblePainted;

    fill: #F7F4F0 !important;

    fill-opacity: .85;

    stroke: #EDE8E1 !important;

    stroke-opacity: .5;

    stroke-width: 1px !important;

    vector-effect: non-scaling-stroke;

    transform-box: fill-box;

    transform-origin: center;

    filter: none;

    outline: none;

    transition:
        fill 180ms ease,
        fill-opacity 180ms ease,
        stroke 180ms ease,
        stroke-opacity 180ms ease,
        filter 180ms ease,
        transform 220ms ease;

}

.explore-map .county:not(.active):hover,
.explore-map:has(.county.active) .county:not(.active):hover,
.explore-map .county.preview:not(.active) {

    transition:
        fill 150ms ease-out,
        fill-opacity 150ms ease-out,
        stroke 150ms ease-out,
        stroke-opacity 150ms ease-out,
        filter 150ms ease-out,
        transform 150ms ease-out;

}

.explore-map:has(.county.active) .county:not(.active) {

    fill: #F3EFE9 !important;

    fill-opacity: .76;

    stroke: #E8E2DA !important;

    stroke-opacity: .42;

}

.explore-map.is-interaction-managed .county:not(.active):not(.preview):hover {

    fill: #F7F4F0 !important;

    fill-opacity: .85;

    stroke: #EDE8E1 !important;

    stroke-opacity: .5;

    filter: none;

    transform: none;

}

.explore-map .county:not(.active):hover {

    fill: #B22222 !important;

    fill-opacity: .68 !important;

    stroke: #A82828 !important;

    stroke-opacity: .62;

    filter: drop-shadow(0 2px 4px rgba(178, 34, 34, .12));

    transform: translateY(-2px);

}

.explore-map:has(.county.active) .county:not(.active):hover {

    fill: #B22222 !important;

    fill-opacity: .68 !important;

    stroke: #A82828 !important;

    stroke-opacity: .62;

    filter: drop-shadow(0 2px 4px rgba(178, 34, 34, .12));

    transform: translateY(-2px);

}

.explore-map .county.preview:not(.active) {

    fill: #B22222 !important;

    fill-opacity: .68 !important;

    stroke: #A82828 !important;

    stroke-opacity: .62;

    filter: drop-shadow(0 2px 4px rgba(178, 34, 34, .12));

    transform: translateY(-2px);

}

.explore-map .county-label.preview:not(.active) {

    opacity: .88;

}

.explore-map .county.active,
.explore-map .county.active:hover {

    fill: url(#county-active-fill) !important;

    fill-opacity: 1;

    stroke: #8F1D1D !important;

    stroke-opacity: .68;

    stroke-width: 1px !important;

    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(0 4px 10px rgba(178, 34, 34, .2))
        drop-shadow(0 1px 4px rgba(35, 54, 77, .06))
        drop-shadow(-0.45px -0.45px 1.5px rgba(255, 255, 255, .4));

    transform: translateY(-2px) scale(1.02);

    transition:
        fill 220ms ease,
        fill-opacity 220ms ease,
        stroke 220ms ease,
        stroke-opacity 220ms ease,
        filter 220ms ease,
        transform 220ms ease;

}

.explore-map .county:focus {

    outline: none;

}

.explore-map .county:not(.active):focus-visible {

    fill: #FBF9F5 !important;

    fill-opacity: 1;

    stroke: #C9A8A8 !important;

    stroke-opacity: .82;

    outline: 2px solid rgba(178, 34, 34, .38);

    outline-offset: 2px;

    filter: none;

    transform: none;

}

.explore-map .county.active:focus-visible {

    outline: 2px solid rgba(178, 34, 34, .42);

    outline-offset: 1px;

}

.explore-map .county.active:focus {

    outline: none;

}

/* ==========================================================================
   Explore Panel
   ========================================================================== */

.explore-panel {

    display: flex;

    flex-direction: column;

    gap: 0;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    padding: 0;

    box-sizing: border-box;

}

/* ==========================================================================
   County Story Card
   ========================================================================== */

.county-details {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    padding: 1.05rem;

    background: #FAF8F5;

    border: 1px solid #E5DED4;

    border-radius: var(--radius-lg);

    box-shadow: 0 12px 36px rgba(35, 54, 77, .07);

}

.county-details > .county-header,
.county-details > .county-description,
.county-details > .featured-section,
.county-details > .county-footer {

    animation: county-panel-fade 180ms ease-out;

}

@keyframes county-panel-fade {

    from {

        opacity: .62;

    }

    to {

        opacity: 1;

    }

}

.county-name,
.county-tagline,
.county-description,
.featured-places,
.featured-places li,
.county-link,
.county-link-arrow {

    transition: opacity 180ms ease-out;

}

.county-header {

    display: flex;

    flex-direction: column;

    gap: calc(.3rem + 2px);

    padding-top: 2px;

}

.county-icon {

    color: var(--color-primary);

    line-height: 0;

}

.county-name {

    color: var(--color-navy);

    font-family: var(--font-heading);

    font-size: 1.875rem;

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: .04em;

    text-transform: uppercase;

    transition: opacity 180ms ease-out;

}

.county-tagline {

    margin: 0;

    color: var(--color-primary);

    font-family: var(--font-body);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    transition: opacity 180ms ease-out;

}

.county-description {

    max-width: 38ch;

    margin: 0;

    margin-top: 0;

    padding-bottom: calc(var(--space-sm) - 2px);

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: 1.125rem;

    line-height: 1.8;

    border-bottom: 1px solid rgba(35, 54, 77, .08);

    transition: opacity 180ms ease-out;

}

.featured-section {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    padding-top: 4px;

    padding-bottom: calc(var(--space-sm) - 4px);

    border-top: 0;

    border-bottom: 1px solid rgba(35, 54, 77, .08);

}

.featured-section h4 {

    margin: 0;

    color: var(--color-navy);

    font-family: var(--font-body);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;

}

.featured-places {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

    margin: 0;

    padding: 0;

    list-style: none;

    transition: opacity 180ms ease-out;

}

.featured-places li {

    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding: 0 1.4rem;

    background: #FFFFFF;

    border: 1px solid rgba(35, 54, 77, .055);

    border-radius: 20px;

    box-shadow: 0 2px 10px rgba(35, 54, 77, .04);

    color: var(--color-navy);

    font-family: var(--font-body);

    font-size: .9rem;

    font-weight: 500;

    line-height: 1.3;

    transition:
        transform 180ms ease-out,
        box-shadow 180ms ease-out,
        border-color 180ms ease-out,
        opacity 180ms ease-out;

}

.featured-places li:hover {

    transform: translateY(-2px);

    border-color: rgba(178, 34, 34, .42);

    box-shadow: 0 4px 14px rgba(35, 54, 77, .07);

}

.county-footer {

    margin-top: 0;

    padding-top: calc(var(--space-md) - 4px);

}

.county-link {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .35rem;

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 2.15vw, 1.55rem);

    font-weight: 500;

    line-height: 1.25;

    text-decoration: none;

    padding-bottom: .12rem;

    transition: opacity 180ms ease-out;

}

.county-link::after {

    content: attr(aria-label);

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    background-image: linear-gradient(currentColor, currentColor);

    background-position: 0 100%;

    background-repeat: no-repeat;

    background-size: 0% 1px;

    transition: background-size 180ms ease-out;

}

.county-link:hover::after {

    background-size: 100% 1px;

}

.county-link:hover {

    color: var(--color-primary);

}

.county-link-arrow {

    flex-shrink: 0;

    font-family: var(--font-body);

    font-size: 1.15em;

    transition: transform 180ms ease-out;

}

.county-link:hover .county-link-arrow {

    transform: translateX(6px);

}

.county-link:focus-visible {

    outline: 3px solid rgba(178, 34, 34, .25);

    outline-offset: 4px;

}

/* ==========================================================================
   Desktop layout and typography
   ========================================================================== */

@media (min-width: 768px) {

    .tiu-explore-embed .panel-header.explore-hero {

        gap: var(--space-xl);

    }

    .tiu-explore-embed h1.hero-title,
    .tiu-explore-embed .hero-title {

        font-size: 3.75rem;

    }

    .tiu-explore-embed p.hero-subheading,
    .tiu-explore-embed .hero-subheading {

        font-size: 2.625rem;

    }

    .tiu-explore-embed .hero-intro,
    .tiu-explore-embed .panel-intro {

        font-size: 1.375rem;

    }

    .county-details {

        gap: var(--space-md);

        padding: 1.4rem;

    }

    .county-name {

        font-size: 2.25rem;

    }

}

@media (min-width: 992px) {

    .tiu-explore-embed .panel-header.explore-hero {

        margin-bottom: var(--space-3xl);

    }

    .explore-map .county-label {

        font-size: 0.81px;

    }

    .explore-map #label-carteret {

        font-size: 0.73px;

    }

    .explore-map .county-label.active {

        font-size: 0.76px;

    }

    .explore-map #label-carteret.active {

        font-size: 0.69px;

    }

    .explore-map-component.map-section {

        position: sticky;

        top: 2rem;

    }

    .map-card {

        padding: var(--space-xs);

    }

    .county-details {

        gap: 1.5rem;

        padding: 1.75rem;

    }

    .county-name {

        font-size: 3rem;

    }

}

/* ==========================================================================
   Large Screens
   ========================================================================== */

@media (min-width: 1440px) {

    .tiu-explore-embed h1.hero-title,
    .tiu-explore-embed .hero-title {

        font-size: 5.25rem;

    }

    .county-name {

        font-size: 3rem;

    }

}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

    .explore-map {

        transform: none;

    }

    .explore-map .county:hover,
    .explore-map .county.preview:not(.active),
    .explore-map .county.active,
    .explore-map .county.active:hover {

        transform: none;

    }

    .county-details > .county-header,
    .county-details > .county-description,
    .county-details > .featured-section,
    .county-details > .county-footer {

        animation: none;

    }

}