/*
 * Tour content typography + section styling (Phase 2 of tour-page redesign).
 *
 * Goals (per the redesign plan):
 *   - Tighter typographic hierarchy (smaller h2/h3, heavier bold)
 *   - Better body line-height + readable measure
 *   - Generous rhythm between sections, tight rhythm within
 *   - Scroll-margin so anchored sections clear any sticky header
 *
 * Loaded on /tours/* and /boats/* detail pages only — not on listing pages.
 */

/* ─── Section rhythm + anchors ─────────────────────────────────────────── */
.tour-section {
    margin: 32px 0;
    scroll-margin-top: 80px;
}
.tour-section:first-child { margin-top: 0; }
.tour-section:last-child { margin-bottom: 0; }
.tour-section-heading {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

/* ─── Body typography refresh ──────────────────────────────────────────── */
.tour-section p,
.tour-section li,
.tour-summary-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}
.tour-section strong { font-weight: 700; }
.tour-section em { font-style: italic; }

/* ─── Hero summary (editorial lead) ────────────────────────────────────
   A confident pitch that sits between the page title and the long
   description. Treated as a magazine pull-quote with a warm vertical
   accent rule, a subtle cream background, and a slightly bolder first
   line so the reader catches the hook before the prose begins. */
.tour-section-summary {
    margin: 16px 0 32px;
    padding: 20px 26px;
    background: linear-gradient(180deg, #fbf8f2 0%, #fdfaf4 100%);
    border-left: 3px solid #c97a3c;
    border-radius: 0 6px 6px 0;
    box-shadow: inset 0 0 0 1px rgba(201, 122, 60, 0.08);
    position: relative;
}
.tour-section-summary::before {
    content: "\201C"; /* opening quote */
    position: absolute;
    top: 6px;
    left: 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    line-height: 1;
    color: rgba(201, 122, 60, 0.22);
    pointer-events: none;
}
.tour-summary-lead {
    font-size: 19px;
    line-height: 1.55;
    color: #2c2620;
    font-weight: 450;
    margin: 0;
    letter-spacing: -0.003em;
}
.tour-summary-lead::first-line {
    font-weight: 600;
}

/* ─── Highlights (compact tag pills, both desktop sidebar + mobile inline) ──
   Each highlight is a small chip that flows inline; the whole list wraps like
   a tag cloud. No icons — the chip itself is the affordance. The block sits
   below the booking widgets on desktop (last sidebar item) and below the
   Overview on mobile. */
.tour-section-highlights {
    margin: 14px 0 0 0;
}
.tour-section-highlights .tour-section-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin: 0 0 10px 0;
}
.tour-highlights-list {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Plain block so each <li> flows inline (the sidebar-default Bootstrap
       theme overrides flex-basis on <li>s nested in .sidebar — using inline-block
       on the children avoids the override entirely). */
    font-size: 0; /* eat the inter-element whitespace gaps between inline-blocks */
}
.tour-highlights-list li {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    vertical-align: middle;
    margin: 0 3px 4px 0;
    padding: 4px 11px;
    background: #f4f1ea;
    border-radius: 100px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #5b5246;
    font-weight: 500;
    transition: background 0.18s ease;
    opacity: 0;
    transform: translateY(4px);
    animation: tour-highlight-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.tour-highlights-list li:nth-child(1) { animation-delay: 40ms; }
.tour-highlights-list li:nth-child(2) { animation-delay: 80ms; }
.tour-highlights-list li:nth-child(3) { animation-delay: 120ms; }
.tour-highlights-list li:nth-child(4) { animation-delay: 160ms; }
.tour-highlights-list li:nth-child(5) { animation-delay: 200ms; }
.tour-highlights-list li:nth-child(6) { animation-delay: 240ms; }
@keyframes tour-highlight-in {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tour-highlights-list li {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
.tour-highlights-list li:hover {
    background: #efeadc;
    border-color: #d9c4a6;
}
/* The chip is text-only — the sprite icon coming from _highlights.blade.php is
   visually redundant in pill form, so hide it. */
.tour-highlights-list .tour-highlight-icon { display: none; }

/* Inline copy (in main content column) is mobile-only.
   Sidebar copy (in right rail) is desktop-only. */
@media (min-width: 992px) {
    .tour-section-highlights-inline { display: none; }
}
@media (max-width: 991px) {
    .tour-section-highlights-sidebar { display: none; }
}

/* ─── Overview (description) ───────────────────────────────────────────── */
.tour-section-overview .details-row { padding: 0; }
.tour-section-overview .details-content {
    font-size: 16px;
    line-height: 1.65;
    color: #333;
}

/* ─── Menu (editorial "tasting menu" treatment) ────────────────────────
   Replaces the gray-card bulleted list with a typographic block: serif
   italic category titles flanked by short rules, items flowing inline as
   middot-separated text. Reads like a printed menu, not a feature list.
   Section heading stays LEFT-aligned to match the other section headings;
   the menu body itself contains the centred tasting-menu vocabulary. */
.tour-section-menu .tour-section-heading::after {
    /* Override the section-heading underline rule — the menu has its own
       decorative ornaments per category. */
    display: none;
}
.tour-menu-body {
    background: #fdfaf3;
    border: 1px solid #efe6d2;
    border-radius: 4px;
    padding: 28px 24px 24px;
}
.tour-menu-category-block {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 720px;
}
.tour-menu-category-block:last-child {
    margin-bottom: 0;
}
.tour-menu-category {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: #8a6a3a;
    text-transform: none;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    position: relative;
    display: inline-block;
    padding: 0 32px;
}
.tour-menu-category::before,
.tour-menu-category::after {
    content: "";
    position: absolute;
    top: 55%;
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #c9a87a 100%);
}
.tour-menu-category::before {
    left: 0;
    transform: scaleX(-1);
}
.tour-menu-category::after {
    right: 0;
}
.tour-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15.5px;
    color: #4a4030;
    line-height: 1.8;
    column-count: auto;
    column-width: auto;
}
.tour-menu-items li {
    display: inline;
    padding: 0;
}
.tour-menu-items li::after {
    content: " \00b7 ";  /* middle dot with surrounding spaces */
    color: #c9a87a;
    font-weight: 700;
    margin: 0 2px;
}
.tour-menu-items li:last-child::after {
    content: "";
}

@media (max-width: 767px) {
    /* Mobile: items still inline + middot-separated, but left-aligned so the
       reading width is narrower and the dots are easier to track on small
       screens. Category title stays centred. */
    .tour-menu-body { padding: 22px 18px 18px; }
    .tour-menu-category { font-size: 16px; padding: 0 26px; }
    .tour-menu-items { font-size: 14.5px; line-height: 1.75; }
    .tour-menu-category-block { text-align: center; }
    .tour-menu-items {
        display: block;
        text-align: left;
        margin-top: 4px;
    }
}

/* ─── What to bring (horizontal icon grid) ─────────────────────────────
   Switched from vertical text-list to a grid of icon-above-label tiles.
   Auto-fit fills the row with as many ~96px tiles as the container will
   take, breaking to 3 or 2 per row on narrower viewports. */
.tour-what-to-bring-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 14px 12px;
    list-style: none;
}
.tour-what-to-bring-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 6px 10px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: #2c2620;
    font-weight: 500;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.tour-what-to-bring-list li:hover {
    border-color: #d9c4a6;
    transform: translateY(-1px);
}
.tour-what-to-bring-list .wtb-text {
    flex: 0 0 auto;
    padding: 0;
}
.wtb-tile-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    flex-shrink: 0;
    /* Slight contrast lift so the line-art icons read on the off-white tile */
    opacity: 0.92;
}
.tour-what-to-bring-list li:hover .wtb-tile-icon { opacity: 1; }

/* ─── Overview show-more/less — give the toggle some breathing room so it
   doesn't butt up against the next section's heading. */
.tour-section-overview .details-row {
    padding-bottom: 4px;
}
.tour-section-overview .details-more,
.tour-section-overview .details-less {
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Sprite-based icon cells. 4 cols × 6 rows of 24px cells = 96 × 144px sprite.
   Slug order matches WhatToBringIconResolver::SLUGS. */
.wtb-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 96px 144px;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-top: 2px;
    background-image: url('/images/what-to-bring-sprite.png');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .wtb-icon { background-image: url('/images/what-to-bring-sprite@2x.png'); }
}

/* Per-slug positions — same order as WhatToBringIconResolver::SLUGS. */
.wtb-icon-swimwear          { background-position:    0   0; }
.wtb-icon-towel             { background-position: -24px  0; }
.wtb-icon-sunscreen         { background-position: -48px  0; }
.wtb-icon-hat               { background-position: -72px  0; }
.wtb-icon-sunglasses        { background-position:    0 -24px; }
.wtb-icon-camera            { background-position: -24px -24px; }
.wtb-icon-waterproof_camera { background-position: -48px -24px; }
.wtb-icon-waterproof_bag    { background-position: -72px -24px; }
.wtb-icon-water_bottle      { background-position:    0 -48px; }
.wtb-icon-walking_shoes     { background-position: -24px -48px; }
.wtb-icon-water_shoes       { background-position: -48px -48px; }
.wtb-icon-snorkel_gear      { background-position: -72px -48px; }
.wtb-icon-insect_repellent  { background-position:    0 -72px; }
.wtb-icon-change_clothes    { background-position: -24px -72px; }
.wtb-icon-light_jacket      { background-position: -48px -72px; }
.wtb-icon-toiletries        { background-position: -72px -72px; }
.wtb-icon-cash              { background-position:    0 -96px; }
.wtb-icon-medication        { background-position: -24px -96px; }
.wtb-icon-passport          { background-position: -48px -96px; }
.wtb-icon-phone             { background-position: -72px -96px; }
.wtb-icon-backpack          { background-position:    0 -120px; }
.wtb-icon-default           { background-position: -24px -120px; }

.wtb-text { flex: 1; }

/* ─── Callouts ─────────────────────────────────────────────────────────── */
.tour-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
    border-left: 4px solid;
    background: #f6f8fa;
}
.tour-callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.tour-callout-text { font-size: 15px; line-height: 1.5; }
.tour-callout-info { background: #eef4fb; border-color: #3a8dde; }
.tour-callout-info .tour-callout-icon { color: #3a8dde; }
.tour-callout-tip { background: #eef9f1; border-color: #29b96f; }
.tour-callout-tip .tour-callout-icon { color: #29b96f; }
.tour-callout-warning { background: #fdf3e6; border-color: #e07a1c; }
.tour-callout-warning .tour-callout-icon { color: #e07a1c; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.tour-faq-list { display: flex; flex-direction: column; gap: 4px; }
.tour-faq-item {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease;
}
.tour-faq-item[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.tour-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #222;
    list-style: none;
    user-select: none;
}
.tour-faq-question::-webkit-details-marker { display: none; }
.tour-faq-chevron { transition: transform 0.2s ease; color: #888; }
.tour-faq-item[open] .tour-faq-chevron { transform: rotate(180deg); }
.tour-faq-answer {
    padding: 0 16px 16px 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* ─── TOC (sticky on desktop, accordion on mobile) ─────────────────────── */
.tour-toc {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.tour-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tour-toc-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin: 0;
}
.tour-toc-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.tour-toc-list { list-style: none; margin: 0; padding: 0; }
.tour-toc-list li { margin: 0; padding: 0; }
/* Desktop: split the TOC into 2 columns to save vertical real estate in the
   sidebar — there's a lot of competition above the fold (price + Book Now). */
@media (min-width: 992px) {
    .tour-toc-list {
        column-count: 2;
        column-gap: 8px;
    }
    .tour-toc-list li {
        break-inside: avoid;
    }
}
.tour-toc-list a {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    border-radius: 4px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tour-toc-list a:hover { background: #f4f4f4; color: #222; }
.tour-toc-list a.tour-toc-link-active {
    background: #f0f6ff;
    color: #1c63d4;
    border-left-color: #1c63d4;
    font-weight: 600;
}

@media (max-width: 991px) {
    .tour-toc { margin: 0 0 16px 0; }
    .tour-toc-toggle { display: inline-block; }
    .tour-toc.is-collapsed .tour-toc-list { display: none; }
    .tour-toc.is-collapsed .tour-toc-toggle { transform: rotate(0deg); }
    .tour-toc:not(.is-collapsed) .tour-toc-toggle { transform: rotate(180deg); }
}

/* ─── Sticky mobile CTA ────────────────────────────────────────────────── */
.tour-sticky-cta-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 10px 16px;
    z-index: 1040;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tour-sticky-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.tour-sticky-cta-from {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tour-sticky-cta-amount {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}
.tour-sticky-cta-currency {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-left: 2px;
}
.tour-sticky-cta-btn {
    flex-shrink: 0;
    min-width: 140px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .tour-sticky-cta-mobile { display: flex; }
    /* push page content above the sticky bar so the last section is reachable */
    body.tour-detail-page { padding-bottom: 72px; }
}

/* ─── Hide aging tour-spec scroll position when sticky CTA shows ───────── */
@media (max-width: 767px) {
    .tour-section { margin: 24px 0; }
    .tour-section-heading { font-size: 19px; }
    .tour-section p, .tour-section li { font-size: 15px; }
    .tour-section-summary {
        margin: 12px -4px 24px;
        padding: 16px 18px 16px 22px;
    }
    .tour-summary-lead { font-size: 16.5px; line-height: 1.5; }
    .tour-section-summary::before { font-size: 38px; top: 4px; left: 6px; }
    .tour-highlights-list li { padding: 12px 14px; gap: 12px; }
    .tour-highlight-icon { width: 24px; height: 24px; font-size: 11px; }
}