/* =============================================================================
   HT Homepage — "Base Camp" visual system (WPBakery-free front-page.php).
   Card base: ht-search.css (.ht-tour-card, .ht-blog-card). Fonts: ht-font-head
   (Comme) / ht-font-body (Karla) from selfhost-fonts.php. Brand colours frozen:
   #01A347 (accent) / #013C1A (structural). No new web fonts. No JS for layout.
   ============================================================================= */

:root {
    --ht-green:    #01A347;
    --ht-dark:     #013C1A;
    --ht-bg:       #f9f9f7;   /* paper */
    --ht-white:    #ffffff;
    --ht-tint:     #f3f7f4;   /* faint green-grey for --alt sections */
    --ht-text:     #1a1a1a;
    --ht-muted:    #6b7280;
    --ht-border:   #e5e7eb;
    --ht-rule:     rgba(1,60,26,0.14);   /* hairline */
    --ht-radius:   4px;
    --ht-max:      1280px;
    --ht-gutter:   clamp(1rem, 4vw, 1.5rem);
    --ht-section:  clamp(2.75rem, 6vw, 4.5rem);
    --ht-label-ls: 0.14em;    /* mono-style uppercase tracking */
}

/* ── Section shell ──────────────────────────────────────────────────────────── */
.ht-home-section {
    background:     var(--ht-white);
    padding-top:    var(--ht-section);
    padding-bottom: var(--ht-section);
}
.ht-home-section--alt { background: var(--ht-tint); }

.ht-home-section__inner {
    max-width:     var(--ht-max);
    margin:        0 auto;
    padding-left:  var(--ht-gutter);
    padding-right: var(--ht-gutter);
}

.ht-home-section__header        { margin-bottom: 2rem; max-width: 62ch; }
.ht-home-section__header--center { margin-left: auto; margin-right: auto; text-align: center; }

.ht-home-section__title {
    font-family:    var(--ht-font-head, 'Comme', sans-serif);
    font-size:      clamp(1.5rem, 3vw, 2.15rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--ht-dark);
    margin:         0 0 0.4rem;
    line-height:    1.1;
}
/* Green kicker rule under section titles (Base Camp restraint). */
.ht-home-section__header:not(.ht-home-section__header--center) .ht-home-section__title::after {
    content: ""; display: block; width: 2.25rem; height: 3px;
    background: var(--ht-green); margin-top: 0.85rem; border-radius: 2px;
}
.ht-home-section__header--center .ht-home-section__title::after {
    content: ""; display: block; width: 2.25rem; height: 3px;
    background: var(--ht-green); margin: 0.85rem auto 0; border-radius: 2px;
}

.ht-home-section__sub {
    font-size:   1.0625rem;
    color:       var(--ht-muted);
    margin:      0;
    line-height: 1.55;
}

/* Shared trek grid (curated sections). */
.ht-home-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
    gap: var(--ht-gutter);
}

/* Spec-forward card refinements — homepage scope only (search cards untouched). */
.ht-home-grid .ht-tour-card {
    background:    var(--ht-white);
    border:        1px solid var(--ht-rule);
    border-radius: var(--ht-radius);
    box-shadow:    none;
    transition:    border-color 0.18s ease;
}
.ht-home-grid .ht-tour-card:hover,
.ht-home-grid .ht-tour-card:focus-within { border-color: var(--ht-green); }


/* ═══ SECTION 1 — What makes us different (.ht-home-diff) ═════════════════════ */
.ht-home-diff { background: var(--ht-bg); }
.ht-home-diff__grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: var(--ht-gutter);
}
@media (max-width: 980px) { .ht-home-diff__grid { grid-template-columns: repeat( 2, 1fr ); } }
@media (max-width: 540px) { .ht-home-diff__grid { grid-template-columns: 1fr; } }

.ht-home-diff__item {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 1.5rem 1.35rem;
    background: var(--ht-white);
    border: 1px solid var(--ht-rule);
    border-radius: var(--ht-radius);
    text-decoration: none;
    border-top: 3px solid transparent;
    transition: border-top-color 0.18s ease, transform 0.18s ease;
}
.ht-home-diff__item:hover,
.ht-home-diff__item:focus-visible {
    border-top-color: var(--ht-green);
    transform: translateY(-2px);
    text-decoration: none;
}
.ht-home-diff__icon { width: 2.25rem; height: 2.25rem; color: var(--ht-green); }
.ht-home-diff__icon svg { width: 100%; height: 100%; }
.ht-home-diff__title {
    font-family: var(--ht-font-head, 'Comme', sans-serif);
    font-size: 1.0625rem; font-weight: 700; color: var(--ht-dark);
    margin: 0; line-height: 1.25; letter-spacing: -0.01em;
}
.ht-home-diff__text { font-size: 0.9rem; color: var(--ht-muted); margin: 0; line-height: 1.55; }


/* ═══ SECTION 2 — Stats panel (.ht-home-stats) — Base Camp signature ══════════ */
.ht-home-stats {
    background-color: var(--ht-dark);
    /* CSS-only topographic rings (no image request). */
    background-image:
        radial-gradient( circle at 90% 50%, transparent 0 27.6%, rgba(1,163,71,0.16) 27.6% 28%, transparent 28% ),
        radial-gradient( circle at 90% 50%, transparent 0 35.6%, rgba(255,255,255,0.06) 35.6% 36%, transparent 36% ),
        radial-gradient( circle at 90% 50%, transparent 0 43.6%, rgba(255,255,255,0.05) 43.6% 44%, transparent 44% ),
        radial-gradient( circle at 90% 50%, transparent 0 51.6%, rgba(255,255,255,0.04) 51.6% 52%, transparent 52% );
    padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.ht-home-stats__inner {
    max-width: var(--ht-max); margin: 0 auto;
    padding-left: var(--ht-gutter); padding-right: var(--ht-gutter);
    display: grid; grid-template-columns: repeat( 4, 1fr );
}
.ht-home-stats__item {
    text-align: center; padding: 0.5rem 1.25rem;
    border-right: 1px solid rgba(255,255,255,0.14);
}
.ht-home-stats__item:last-child { border-right: none; }
.ht-home-stats__num {
    display: block;
    font-family: var(--ht-font-head, 'Comme', sans-serif);
    font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800;
    color: #fff; line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.ht-home-stats__num small { font-size: 0.5em; font-weight: 600; color: var(--ht-green); margin-left: 2px; }
.ht-home-stats__label {
    display: block; margin-top: 0.6rem;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ht-label-ls);
    color: rgba(255,255,255,0.62);
}
@media (max-width: 600px) {
    .ht-home-stats__inner { grid-template-columns: 1fr 1fr; gap: 1.25rem 0; }
    .ht-home-stats__item:nth-child(2) { border-right: none; }
}


/* ═══ SECTION 5 — Browse by Region (.ht-home-regions) ═════════════════════════ */
.ht-home-regions { background: var(--ht-bg); }
.ht-home-regions__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
    gap: var(--ht-gutter);
}
.ht-region-tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 190px; padding: 1.1rem 1.2rem;
    border-radius: var(--ht-radius); overflow: hidden;
    background: var(--ht-dark) center/cover no-repeat;
    text-decoration: none; color: #fff;
    transition: transform 0.2s ease;
}
.ht-region-tile:hover, .ht-region-tile:focus-visible { transform: translateY(-3px); text-decoration: none; }
.ht-region-tile::after {
    content: ""; position: absolute; inset: 0; border: 0 solid var(--ht-green);
    transition: border-width 0.15s ease; pointer-events: none; border-radius: var(--ht-radius);
}
.ht-region-tile:hover::after, .ht-region-tile:focus-visible::after { border-width: 2px; }
.ht-region-tile__name {
    position: relative; z-index: 1;
    font-family: var(--ht-font-head, 'Comme', sans-serif);
    font-size: 1.15rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
}
.ht-region-tile__count {
    position: relative; z-index: 1; margin-top: 0.3rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--ht-label-ls); color: rgba(255,255,255,0.8);
}


/* ═══ SECTION 6 — Reviews & Feedback + video (.ht-home-reviews) ═══════════════ */
.ht-home-reviews { background: var(--ht-white); }
.ht-home-reviews__layout {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 860px) { .ht-home-reviews__layout { grid-template-columns: 1fr; } }
/* No review data yet (GBP sync pending): video carries the section, centred. */
.ht-home-reviews__layout--solo { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

/* Video facade — thumbnail link, no iframe until the user leaves to YouTube. */
.ht-home-video {
    position: relative; display: block; border-radius: var(--ht-radius);
    overflow: hidden; text-decoration: none; background: var(--ht-dark);
    aspect-ratio: 16 / 10;
}
.ht-home-video__thumb { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.ht-home-video__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ht-green); color: #fff;
    display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.18s ease;
}
.ht-home-video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.ht-home-video:hover .ht-home-video__play,
.ht-home-video:focus-visible .ht-home-video__play { transform: translate(-50%,-50%) scale(1.08); }
.ht-home-video__label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem;
    background: linear-gradient(to top, rgba(1,42,26,0.85), transparent);
    color: #fff; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ht-label-ls);
}


/* ═══ SECTION 7 — Catalogue carousel (.ht-home-carousel) ══════════════════════ */
/* Carousel internals live in ht-carousel.css; this only sets the section frame. */


/* ═══ SECTION 10 — From the Field + DIY (.ht-home-posts) ══════════════════════ */
.ht-home-posts { background: var(--ht-bg); }
.ht-home-posts__grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
    gap: var(--ht-gutter);
}
.ht-home-posts__diy {
    margin-top: clamp(2rem, 5vw, 3.25rem);
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    border-top: 1px solid var(--ht-rule);
}
.ht-home-posts__diy-title {
    font-family: var(--ht-font-head, 'Comme', sans-serif);
    font-size: 1.35rem; font-weight: 700; color: var(--ht-dark);
    margin: 0 0 0.3rem; letter-spacing: -0.015em;
}
.ht-home-posts__grid--diy { grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); margin-top: 1.25rem; }


/* ═══ SECTION 11 — Trek Finder CTA (.ht-home-finder) ══════════════════════════ */
.ht-home-finder {
    background: linear-gradient(135deg, #EFF6F2 0%, #dff0e7 100%);
    text-align: center;
}
.ht-home-finder__inner {
    max-width: 640px; margin: 0 auto;
    padding-left: var(--ht-gutter); padding-right: var(--ht-gutter);
}
.ht-home-finder__eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: var(--ht-label-ls);
    text-transform: uppercase; color: var(--ht-green); margin: 0 0 0.5rem;
}
.ht-home-finder__title {
    font-family: var(--ht-font-head, 'Comme', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700;
    color: var(--ht-dark); margin: 0 0 0.75rem; line-height: 1.15; letter-spacing: -0.02em;
}
.ht-home-finder__desc { font-size: 1.0625rem; color: var(--ht-muted); margin: 0 0 1.5rem; line-height: 1.55; }
.ht-home-finder__btn {
    display: inline-block; padding: 0.85rem 2rem;
    background: var(--ht-green); color: #fff !important;
    border-radius: var(--ht-radius); font-size: 1rem; font-weight: 700;
    text-decoration: none; line-height: 1; transition: background 0.18s ease;
}
.ht-home-finder__btn:hover, .ht-home-finder__btn:focus {
    background: var(--ht-dark); color: #fff !important; text-decoration: none;
    outline: 2px solid rgba(1,163,71,0.3); outline-offset: 3px;
}


/* ═══ SECTION 12 — Photo-credit note (.ht-home-credit) ════════════════════════ */
.ht-home-credit { background: var(--ht-white); padding: 1.5rem 0 2.5rem; }
.ht-home-credit__note {
    text-align: center; font-size: 0.8rem; color: var(--ht-muted);
    margin: 0; line-height: 1.5;
}