/* =============================================================================
   HT Homepage — visual system v2 ("Field Notes" + The Altitude Line).
   WPBakery-free front-page.php. Type: Fraunces (head) / Karla (body) from
   selfhost-fonts.php. Brand colours frozen: #01A347 accent / #013C1A structural.
   Greens used sparingly; green TEXT uses the AA-safe #0A6E37. No web fonts, no JS.

   Card rule (indexed images — never up-scale):
     Trek photos are 300×225 (4:3). The trek card shows them centred in a forest
     matte at width:100%;max-width:300px;height:auto — so they are only ever shown
     at, or below, native size on every breakpoint. Blog photos are 600×400 (3:2)
     and may lead the card full-width.
   ============================================================================= */

:root {
    --ht-green:     #01A347;          /* fills / CTA / hover only */
    --ht-green-ink: #0A6E37;          /* green TEXT (WCAG AA on paper) */
    --ht-dark:      #013C1A;          /* structural / matte / footer */
    --ht-bg:        #FBFAF7;          /* warm paper — default surface */
    --ht-tint:      #EEF3EF;          /* soft sage — alternate surface */
    --ht-white:     #ffffff;
    --ht-text:      #1B2B22;          /* warm ink */
    --ht-muted:     #5E6B63;          /* stone — captions / meta */
    --ht-border:    #e7eae8;
    --ht-rule:      rgba(1,60,26,0.12);
    --ht-radius:    6px;
    --ht-max:       1180px;
    --ht-gutter:    clamp(1rem, 4vw, 1.5rem);
    --ht-section:   clamp(2.75rem, 6vw, 4.5rem);
    --ht-label-ls:  0.14em;
}

/* ── Section shell ──────────────────────────────────────────────────────────── */
.ht-home-section {
    position:       relative;
    background:     var(--ht-bg);
    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);
}

/* "The Altitude Line" — a CSS-only topographic ridge that rises out of the
   preceding paper section into each sage (--alt) section. <1 KB inline SVG, no
   image request, no JS. Drawn only on --alt sections, for measured rhythm. */
.ht-home-section--alt::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 30px; transform: translateY(-100%); pointer-events: none;
    background: bottom / 100% 30px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L0,17 L170,9 L330,19 L520,6 L720,17 L920,7 L1120,18 L1290,10 L1440,16 L1440,30 Z' fill='%23EEF3EF'/%3E%3Cpath d='M0,17 L170,9 L330,19 L520,6 L720,17 L920,7 L1120,18 L1290,10 L1440,16' fill='none' stroke='%2301A347' stroke-opacity='0.42' stroke-width='1.5'/%3E%3C/svg%3E");
}

.ht-home-section__header         { margin-bottom: 2.25rem; 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, Georgia, serif);
    font-size:      clamp(1.6rem, 3vw, 2.25rem);
    font-weight:    600;
    letter-spacing: -0.01em;
    color:          var(--ht-dark);
    margin:         0 0 0.4rem;
    line-height:    1.12;
}
.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.9rem; 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.9rem auto 0; border-radius: 2px;
}
.ht-home-section__sub {
    font-size:   1.0625rem;
    color:       var(--ht-muted);
    margin:      0;
    line-height: 1.55;
}

/* ── Keyword H1, just under the banner (front-page.php) ───────────────────────
   The single page H1. Centred, on paper, with a green kicker — distinct and
   keyword-focused, not buried in the banner image. */
.ht-home-h1 {
    background: var(--ht-bg);
    padding: clamp(1.75rem, 4.5vw, 3rem) 0 clamp(0.5rem, 2vw, 1rem);
    text-align: center;
}
.ht-home-h1__text {
    /* Let the phrase breathe to ~2 balanced lines on wide desktops (was 24ch → 3
       cramped lines). Sized for elegant, retina-crisp reading — present, not beefy. */
    max-width: 42ch;
    margin: 0 auto;
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: clamp(1.85rem, 1.1rem + 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--ht-dark);
    text-wrap: balance;
}
.ht-home-h1__text::after {
    content: ""; display: block; width: 2.5rem; height: 3px;
    background: var(--ht-green); border-radius: 2px; margin: 1rem auto 0;
}

/* Front-page banner: quiet page label (non-H1) — the keyword H1 lives below. */
.header-section__title--label {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 600 !important;
    opacity: 0.92;
}


/* ═══ Trek card (.ht-fn-card) — 3-up vertical ════════════════════════════════
   Photo on top; card is capped to the photo's native 300px width so the indexed
   300×225 source is shown at, or below, native size (never up-scaled). Grade pill
   on the image; 2×2 stat grid = altitude · duration · trail length · price
   (grade is NOT repeated — it lives on the image). */
/* Strict 3-column grid so cards never orphan. Mobile stacks to 1 column.
   Tablet (≤860px) falls to 2 columns. Grid intrinsically fills each slot
   — no trailing orphan possible at any curated count. */
.ht-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.6vw, 2.1rem);
}
.ht-home-grid > .ht-fn-card {
    min-width: 0; /* prevent grid blowout */
}
@media (max-width: 860px) {
    .ht-home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ht-home-grid { grid-template-columns: 1fr; }
}

.ht-fn-card {
    display: flex; flex-direction: column;
    background: var(--ht-white);
    border: 1px solid var(--ht-rule);
    border-radius: var(--ht-radius);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ht-fn-card:hover,
.ht-fn-card:focus-within {
    border-color: var(--ht-green);
    box-shadow: 0 16px 36px -22px rgba(1,60,26,0.45);
    transform: translateY(-3px);
}

/* The card is wider than the indexed 300×225 photo. The sharp source is shown at
   (or below) native size, centred, on a soft-blurred zoom of itself — the matte
   fills the surround so the card reads full without ever up-scaling the photo. */
.ht-fn-card__media {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--ht-tint);
    overflow: hidden;
}
.ht-fn-card__media::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--ht-card-bg);
    background-size: cover; background-position: center;
    filter: blur(18px) saturate(1.08) brightness(0.96);
    transform: scale(1.18);
}
.ht-fn-card__photo {
    position: relative; z-index: 1;
    display: block;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 6px 20px -7px rgba(1,40,18,0.5);
}
/* No-image fallback: a calm contour panel + icon, not a bare tile (Spiti etc.). */
.ht-fn-card__media--noimg {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%2301A347' stroke-opacity='0.16' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0,220 L70,170 L130,205 L200,150 L260,195 L330,140 L400,185'/%3E%3Cpath d='M0,250 L70,205 L130,235 L200,188 L260,225 L330,178 L400,215'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,
        var(--ht-tint);
}
.ht-fn-card__noimg {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 100%; height: 100%; color: var(--ht-muted);
}
.ht-fn-card__noimg svg { width: 40px; height: 40px; opacity: 0.55; }

.ht-fn-card__grade {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-family: var(--ht-font-body, sans-serif);
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; padding: 4px 9px; border-radius: 3px;
    background: rgba(1,42,26,0.85); backdrop-filter: blur(2px);
}
.ht-fn-card__grade--easy       { background: rgba(1,120,55,0.92); }
.ht-fn-card__grade--moderate   { background: rgba(176,120,12,0.94); }
.ht-fn-card__grade--difficult  { background: rgba(176,58,46,0.94); }
.ht-fn-card__grade--expedition { background: rgba(74,38,90,0.94); }

.ht-fn-card__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.ht-fn-card__eyebrow {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--ht-label-ls);
    text-transform: uppercase; color: var(--ht-green-ink); margin: 0 0 0.35rem;
}
.ht-fn-card__title {
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: 1.2rem; font-weight: 600; line-height: 1.18; letter-spacing: -0.01em;
    color: var(--ht-dark); margin: 0 0 0.5rem;
}
.ht-fn-card__title a { color: inherit; text-decoration: none; }
.ht-fn-card__title a:hover { color: var(--ht-green-ink); }
/* ~22-word trek summary sits between the title and the stat strip. */
.ht-fn-card__excerpt {
    font-size: 0.875rem; line-height: 1.58; color: var(--ht-muted);
    margin: 0 0 1rem;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Single horizontal layer of facts: altitude · duration · trail · price.
   dt reserves two lines so the values bottom-align across all four columns. */
.ht-fn-card__stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem;
    margin: auto 0 0; padding-top: 0.85rem; border-top: 1px solid var(--ht-rule);
}
.ht-fn-card__stat { display: flex; flex-direction: column; min-width: 0; }
.ht-fn-card__stat dt {
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ht-muted); margin: 0 0 3px; line-height: 1.15; min-height: 2.1em;
}
.ht-fn-card__stat dd {
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: 0.9rem; font-weight: 600; color: var(--ht-text); margin: 0; line-height: 1.05;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}


/* ═══ SECTION — What makes us different (.ht-home-diff) ═══════════════════════ */
.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.55rem;
    padding: 1.6rem 1.4rem;
    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, box-shadow 0.18s ease;
}
.ht-home-diff__item:hover,
.ht-home-diff__item:focus-visible {
    border-top-color: var(--ht-green);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -20px rgba(1,60,26,0.4);
    text-decoration: none;
}
/* Soft rounded sage tile holding a line icon (Stitch-style). */
.ht-home-diff__icon {
    width: 52px; height: 52px; border-radius: 13px;
    background: var(--ht-tint);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.35rem;
}
.ht-home-diff__icon svg { width: 26px; height: 26px; color: var(--ht-green-ink); }
.ht-home-diff__title {
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: 1.1875rem; font-weight: 600; color: var(--ht-dark);
    margin: 0; line-height: 1.2; letter-spacing: -0.005em;
}
.ht-home-diff__text { font-size: 0.875rem; color: var(--ht-muted); margin: 0; line-height: 1.55; }


/* ═══ SECTION — Stats panel (.ht-home-stats) ══════════════════════════════════ */
.ht-home-stats {
    background-color: var(--ht-dark);
    /* Warm topographic line-art (contour ridgelines) — meaningful, prominent, and
       calm against the forest band. Inline SVG: <1 KB, no image request, no JS. */
    background-image:
        radial-gradient( ellipse 60% 120% at 88% 50%, rgba(243,233,214,0.07) 0, transparent 70% ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpath id='r' d='M0,150 L120,118 L210,142 L330,92 L430,130 L560,84 L690,128 L820,98 L960,138 L1090,102 L1220,142 L1330,112 L1440,134' fill='none'/%3E%3C/defs%3E%3Cg stroke='%23F3E9D6' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23r' transform='translate(0,46)' stroke-opacity='0.30'/%3E%3Cuse href='%23r' transform='translate(0,30)' stroke-opacity='0.20'/%3E%3Cuse href='%23r' transform='translate(0,14)' stroke-opacity='0.13'/%3E%3Cuse href='%23r' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center bottom;
    background-size: cover, cover;
    padding-top: 2.75rem; padding-bottom: 2.75rem;
}
.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, Georgia, serif);
    font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 600;
    color: #fff; line-height: 1; letter-spacing: -0.02em;
    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.65rem;
    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.5rem 0; }
    .ht-home-stats__item:nth-child(2) { border-right: none; }
}


/* ═══ SECTION — Browse by Region (.ht-home-regions) ═══════════════════════════ */
.ht-home-regions__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
    gap: var(--ht-gutter);
}
.ht-region-tile {
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--ht-radius); overflow: hidden;
    background: var(--ht-white, #fff);
    border: 1px solid var(--ht-rule, #e4e8e5);
    text-decoration: none; color: var(--ht-dark);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ht-region-tile:hover, .ht-region-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -18px rgba(1,60,26,0.45);
    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__img {
    aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0;
    background: var(--ht-tint, #eef3ef);
}
.ht-region-tile__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.25s ease;
}
.ht-region-tile:hover .ht-region-tile__img img { transform: scale(1.04); }
.ht-region-tile__noimg {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, #dfeae4, #c9ddd1);
}
.ht-region-tile__caption {
    padding: 0.75rem 1rem 0.85rem;
}
.ht-region-tile__name {
    display: block;
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
    color: var(--ht-dark);
}
.ht-region-tile__count {
    display: block; margin-top: 0.3rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--ht-label-ls); color: var(--ht-muted, #5a7060);
}


/* ═══ SECTION — Reviews & Feedback + video (.ht-home-reviews) ═════════════════ */
.ht-home-reviews__layout {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 860px) { .ht-home-reviews__layout { grid-template-columns: 1fr; } }
.ht-home-reviews__layout--solo { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

/* Real WC tour reviews rendered as compact quote cards (2-up beside the video). */
.ht-home-reviews .ht-reviews__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--ht-gutter);
}
@media (max-width: 1040px) { .ht-home-reviews .ht-reviews__list { grid-template-columns: 1fr; } }
@media (max-width: 860px)  { .ht-home-reviews .ht-reviews__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ht-home-reviews .ht-reviews__list { grid-template-columns: 1fr; } }
.ht-home-reviews .ht-reviews__item {
    margin: 0; padding: 1.1rem 1.2rem;
    background: var(--ht-white); border: 1px solid var(--ht-rule);
    border-radius: var(--ht-radius);
    display: flex; flex-direction: column;
}
.ht-home-reviews .ht-reviews__body {
    color: var(--ht-text); font-size: 0.875rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ht-home-reviews .ht-reviews__trek-badge { margin-top: 0.85rem; align-self: flex-start; }

/* Video: click-to-play facade (same mechanism as /live) — thumbnail swaps to an
   autoplaying YouTube embed IN PLACE; no iframe/3rd-party request until opted in. */
.ht-home-video { position: relative; }
.ht-home-reviews .youtube-playlist-container {
    position: relative; width: 100%; margin: 0; cursor: pointer;
    border-radius: var(--ht-radius); overflow: hidden; background: var(--ht-dark);
    aspect-ratio: 16 / 9;
}
.ht-home-reviews .youtube-thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ht-home-reviews .play-button-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--ht-green); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform 0.18s ease;
}
.ht-home-reviews .youtube-playlist-container:hover .play-button-overlay,
.ht-home-reviews .youtube-playlist-container:focus-visible .play-button-overlay { transform: translate(-50%,-50%) scale(1.08); }
.ht-home-reviews .play-button-overlay svg { width: 26px; height: 26px; margin-left: 3px; }
.ht-home-reviews .youtube-playlist-container:focus-visible { outline: 2px solid var(--ht-green); outline-offset: 2px; }
.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); pointer-events: none;
}
.ht-home-reviews .youtube-playlist-container.is-playing { cursor: default; }
.ht-home-reviews .youtube-playlist-container iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }


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


/* ═══ SECTION — From the Field editorial blog cards (.ht-home-posts) ══════════ */
.ht-home-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ht-gutter);
}
@media (max-width: 860px) {
    .ht-home-posts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ht-home-posts__grid { grid-template-columns: 1fr; }
}
.ht-home-blog {
    display: flex; flex-direction: column;
    background: var(--ht-white);
    border: 1px solid var(--ht-rule);
    border-radius: var(--ht-radius);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ht-home-blog:hover,
.ht-home-blog:focus-within {
    border-color: var(--ht-green);
    box-shadow: 0 14px 34px -20px rgba(1,60,26,0.4);
    transform: translateY(-2px);
}
.ht-home-blog__media { display: block; aspect-ratio: 3 / 2; background: var(--ht-tint); overflow: hidden; }
.ht-home-blog__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ht-home-blog__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #dfeae4, #c9ddd1); }
.ht-home-blog__body { padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.ht-home-blog__cat {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--ht-label-ls);
    text-transform: uppercase; color: var(--ht-green-ink); margin-bottom: 0.5rem;
}
.ht-home-blog__title {
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--ht-dark); margin: 0 0 0.55rem;
}
.ht-home-blog__title a { color: inherit; text-decoration: none; }
.ht-home-blog__title a:hover { color: var(--ht-green-ink); }
.ht-home-blog__excerpt { font-size: 0.875rem; line-height: 1.55; color: var(--ht-muted); margin: 0 0 1rem; }
.ht-home-blog__meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--ht-rule);
    font-size: 0.78rem; color: var(--ht-muted);
}
.ht-home-blog__more {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-weight: 700; color: var(--ht-green-ink);
}


/* ═══ SECTION — Trek Finder CTA (.ht-home-finder) ═════════════════════════════ */
/* A quiet nudge, not a billboard — soft tint, restrained type, one clear link. */
.ht-home-finder {
    background: #F2F7F4;
    border-top: 1px solid var(--ht-border);
    text-align: center;
}
.ht-home-finder__inner {
    max-width: 620px; margin: 0 auto;
    padding-left: var(--ht-gutter); padding-right: var(--ht-gutter);
}
.ht-home-finder__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: var(--ht-label-ls);
    text-transform: uppercase; color: var(--ht-muted); margin: 0 0 0.55rem;
}
.ht-home-finder__title {
    font-family: var(--ht-font-head, Georgia, serif);
    font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 600;
    color: var(--ht-dark); margin: 0 0 0.6rem; line-height: 1.16; letter-spacing: -0.01em;
}
.ht-home-finder__desc { font-size: 1rem; color: var(--ht-muted); margin: 0 0 1.4rem; line-height: 1.55; }
.ht-home-finder__btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.7rem 1.5rem;
    background: var(--ht-green); color: #fff !important;
    border-radius: var(--ht-radius); font-size: 0.95rem; font-weight: 700;
    text-decoration: none; line-height: 1;
    box-shadow: 0 8px 20px -12px rgba(1,120,55,0.8);
    transition: background 0.18s ease, transform 0.18s ease;
}
.ht-home-finder__btn::after { content: "\2192"; font-weight: 600; transition: transform 0.18s ease; }
.ht-home-finder__btn:hover, .ht-home-finder__btn:focus {
    background: var(--ht-dark); color: #fff !important; text-decoration: none;
    transform: translateY(-1px);
    outline: 2px solid rgba(1,163,71,0.3); outline-offset: 3px;
}
.ht-home-finder__btn:hover::after { transform: translateX(3px); }


/* ═══ SECTION — Photo-credit note (.ht-home-credit) ═══════════════════════════ */
.ht-home-credit { background: var(--ht-bg); 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;
}