/* ═══════════════════════════════════════════════════════════════════════════
   ivs-card-tour — the featured tour card + its section shell.
   ─────────────────────────────────────────────────────────────────────────
   Extracted from homepage.css (Fase 4, rule-wajib/arsitektur-komponen.md).
   Used by the homepage strip AND the Featured Tours page, which render the
   same partial (partials/featured-tour-card.blade.php) — one stylesheet so
   the two can never drift. Load with ?v=filemtime.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ============================================================
   Featured Tours - curated wide grid (homepage)
   Data-driven from $featuredTourIds. Each card cross-fades up to
   five photos (type B first, then D). The container widens past
   the site's 1230px shell - the same move the Transfer (1720px)
   and Boat (1560px) sections already make - so the photos read
   at a size worth looking at.
   ============================================================ */

.ivs-ftour-container {
    width: min(1680px, calc(100% - 3rem));
    max-width: none;
}

/* Eyebrow above the H2. Olive — the site-wide accent (terracotta was
   retired 4 Aug 2026); one accent per page. */
.ivs-ftour-eyebrow {
    display: block;
    margin-bottom: 0.8rem;
    font-family: var(--v5-font-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}

/* The site-wide .title h2 is Roboto 600; Boat and Divine Living next door
   are Playfair 500. Match the neighbours - the text and the tag are
   untouched, so this is purely how the same heading is drawn. */
.ivs-ftour-section .title h2,
.ivs-ftour-section .title h2 span {
    font-family: var(--v5-font-display);
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
}

/* The standing .title h4 is sized for one short line; this one carries a
   full sentence, so give it measure and room to breathe. */
.ivs-ftour-section .title h4 {
    max-width: 62ch;
    margin: 0.85rem auto 0;
    font-family: var(--v5-font-body);
    font-size: clamp(0.92rem, 1vw, 1.02rem);
    line-height: 1.75;
    color: var(--v5-stone);
}

.ivs-ftour-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 1.7vw, 1.5rem);
    margin-top: 0.5rem;
}

.ivs-ftour-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--v5-line);
    color: var(--v5-ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ivs-ftour-card:hover,
.ivs-ftour-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--v5-olive-500);
    box-shadow: 0 14px 32px rgba(32, 31, 29, 0.12);
    color: var(--v5-ink);
    text-decoration: none;
}

.ivs-ftour-card:focus-visible {
    outline: 2px solid var(--v5-olive-500);
    outline-offset: 3px;
}

/* ── Photo ── */
.ivs-ftour-frames {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--v5-parchment);
}

.ivs-ftour-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Centre-crop, biased slightly high: keeps the subject in frame and
       pushes the burnt-in watermark past the bottom edge. */
    object-fit: cover;
    object-position: center 42%;
    display: block;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.ivs-ftour-img.is-active {
    opacity: 1;
}

/* Top-left, ink on parchment - the same corner and colour the V5
   Recommended Tours postcard uses, so the two read as one system. */
.ivs-ftour-badge {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 6px 12px;
    background: var(--v5-ink);
    color: var(--v5-parchment);
    font-family: var(--v5-font-label);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ivs-ftour-dots {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    gap: 4px;
}

.ivs-ftour-dot {
    width: 15px;
    height: 2px;
    background: rgba(255, 255, 255, 0.42);
    transition: background 0.35s ease;
}

.ivs-ftour-dot.is-active {
    background: #ffffff;
}

/* ── Text ── */
.ivs-ftour-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.15rem 1.3rem 1.15rem;
}

/* Titles run 61-149 characters and four of the six need three lines to
   land whole. Clamp at three AND reserve three lines' height, so a short
   title leaves the same gap as a long one and every divider shares a y. */
.ivs-ftour-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.62rem;
    min-height: calc(3 * 1.3em);
    font-family: var(--v5-font-display);
    font-size: clamp(1.04rem, 1.1vw, 1.18rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--v5-ink);
}

/* Sits directly above the divider: push it down with auto margin so the
   slack from a short title collects here, not as a gap in the middle.
   Four places never fit on one line, so this is designed as two: the
   separator is pinned to the item it follows, which stops a stray dot
   from starting the second line. */
.ivs-ftour-stay {
    display: block;
    margin-top: auto;
    margin-bottom: 0.72rem;
    min-height: calc(2 * 1.62em);
    font-family: var(--v5-font-label);
    font-size: 0.78rem;
    line-height: 1.62;
    color: var(--v5-stone);
}

.ivs-ftour-stay-item {
    white-space: nowrap;
}

/* Every item carries its own bullet, including the first. As a separator
   between items the dot landed at the start of the second line, so one
   line opened on a number and the next on punctuation. */
.ivs-ftour-stay-item::before {
    content: '·';
    margin-right: 0.4rem;
    color: var(--v5-olive-300);
}

/* No margin between items: the container is display:block, so a margin
   rides along when a line wraps and pushes it past the line above. The
   whitespace in the markup already separates them. */

/* The night count is the fact worth scanning; the place name reads
   quieter so the eye picks up the rhythm rather than a flat run of text. */
.ivs-ftour-stay-count {
    font-weight: 600;
    color: var(--v5-ink);
}

/* Includes sit in the open now that the text has its own ground. */
.ivs-ftour-reveal {
    padding-top: 0.72rem;
    border-top: 1px solid var(--v5-line);
}

.ivs-ftour-reveal-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--v5-font-label);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}

/* Four single-line items: a fixed, predictable block height. */
.ivs-ftour-reveal-list {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-height: calc(4 * 1.55em + 3 * 0.22rem);
}

/* Inclusions run from 20 to 160 characters and the set rotates on every
   load. Holding each to a single line is what keeps all six dividers on
   the same y - a wrapped entry would push its card taller than the rest. */
.ivs-ftour-reveal-item {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.9rem;
    font-family: var(--v5-font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--v5-stone);
}

.ivs-ftour-reveal-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 3px;
    height: 3px;
    background: var(--v5-olive-300);
}

/* Same treatment as the V5 Recommended Tours card: stone that warms to
   olive, arrow nudging right. The card is already one big link, so this
   is a signpost rather than a button competing with the photo. */
.ivs-ftour-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.78rem;
    font-family: var(--v5-font-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v5-stone);
    transition: color 0.3s ease;
}

.ivs-ftour-arrow {
    transition: transform 0.3s ease;
}

.ivs-ftour-card:hover .ivs-ftour-cta,
.ivs-ftour-card:focus-visible .ivs-ftour-cta {
    color: var(--v5-olive-700);
}

.ivs-ftour-card:hover .ivs-ftour-arrow,
.ivs-ftour-card:focus-visible .ivs-ftour-arrow {
    transform: translateX(4px);
}

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

@media (max-width: 1199px) {
    .ivs-ftour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .ivs-ftour-title {
        -webkit-line-clamp: 4;
        min-height: calc(4 * 1.3em);
    }
}

@media (max-width: 575px) {
    .ivs-ftour-title {
        -webkit-line-clamp: 4;
        min-height: calc(4 * 1.3em);
    }
}

@media (max-width: 767px) {
    .ivs-ftour-container {
        width: 100%;
    }

    .ivs-ftour-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-ftour-img,
    .ivs-ftour-card {
        transition: none;
    }
}

/* ============================================================
   Featured Tours - second group
   Jesse's list runs to a dozen journeys. Rather than four rows of
   the same card, or hiding half behind a slider, the rest sit
   below as portrait tiles: five columns against the three above,
   so the change of rhythm marks them as a group on purpose.
   ============================================================ */

.ivs-ftour-split {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: clamp(2rem, 3vw, 2.8rem) 0 clamp(1.4rem, 2vw, 1.9rem);
}

.ivs-ftour-split::before,
.ivs-ftour-split::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--v5-line);
}

.ivs-ftour-split span {
    font-family: var(--v5-font-label);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   FEATURED TOURS — homepage link out, and the full page
   ═══════════════════════════════════════════════════════
   The homepage now shows three journeys and sends the reader
   here for the rest. Both draw the same card partial, so this
   block only has to cover what is around the cards.
   ═══════════════════════════════════════════════════════ */

/* ── Homepage: the way through to the full list ── */
.ivs-ftour-more {
    margin-top: 2.6rem;
    text-align: center;
}

.ivs-ftour-more-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2.4rem;
    border-radius: 3px;
    background: var(--v5-olive-700);
    color: #fff;
    font-family: var(--v5-font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    transition: background-color 0.34s ease, transform 0.34s ease;
}

.ivs-ftour-more-cta:hover,
.ivs-ftour-more-cta:focus-visible {
    background: var(--v5-olive-900);
    color: #fff;
    transform: translateY(-2px);
}

.ivs-ftour-more-cta:hover .ivs-ftour-arrow {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .ivs-ftour-more { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-ftour-more-cta,
    .ivs-ftpage-cta,
    .ivs-ftpage-arrow,
    .ivs-ftour-arrow {
        transition: none !important;
    }
}