/*
* 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; }
/* When a tour-section is itself a Bootstrap column (Itinerary + Included
render as side-by-side col-md-6 inside a .row), drop the vertical margin
so both columns top-align regardless of which one is the row's
:first-child. Without this, the second column ends up ~32px lower than
the first. */
[class*="col-"].tour-section { margin-top: 0; 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 flows inline (the sidebar-default Bootstrap
theme overrides flex-basis on 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; }
/* ─── Overview (description) ───────────────────────────────────────────── */
.tour-section-overview .details-row { padding: 0; }
/* ─── 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;
}
}
/* ─── Menu collapse (content-aware show-more) ──────────────────────────
Engaged only when the blade marks the menu as "big" (>3 categories or
>10 items). Re-uses the showMoreClick/showLessClick helpers from
page-details.js + the .details-container / .details-height base styles
in my.css. The overrides below specialise the look for the tasting-menu
aesthetic — taller clamp, parchment-coloured fade, italic bronze toggle. */
.tour-section-menu .tour-menu-collapsible {
/* Reset the section-heading sibling spacing so the toggle sits inside
the parchment card. The base .details-container has no extra margin
so this is mostly documentary. */
margin-top: 0;
}
.tour-section-menu .details-container .details-content.details-height {
/* Default base is 154px which cuts mid-category. 280px lands cleanly
just after the second category on the cooking-classes tour. */
max-height: 280px !important;
}
.tour-section-menu .details-container .details-content.details-height::after {
/* The base rule uses url('.../white_gradient.png') which clashes with the
cream parchment background. Override with a transparent → parchment
linear-gradient so the cutoff dissolves into the card colour. */
background: linear-gradient(180deg,
rgba(253, 250, 243, 0) 0%,
#fdfaf3 90%) !important;
height: 80px !important;
pointer-events: none;
}
/* Bronze italic toggle — echoes the category title typography */
.tour-section-menu .tour-menu-toggle {
text-align: center;
margin-top: 18px;
padding: 12px 16px 4px;
border-top: 1px solid #efe6d2;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 14px;
color: #8a6a3a;
letter-spacing: 0.01em;
cursor: pointer;
transition: color 0.18s ease;
}
.tour-section-menu .tour-menu-toggle:hover {
color: #6b4f24;
}
.tour-section-menu .tour-menu-toggle i {
margin-left: 6px;
font-size: 11px;
vertical-align: middle;
transition: transform 0.18s ease;
color: inherit;
}
.tour-section-menu .details-more.tour-menu-toggle:hover i {
transform: translateY(2px);
}
.tour-section-menu .details-less.tour-menu-toggle:hover i {
transform: translateY(-2px);
}
@media (max-width: 767px) {
.tour-section-menu .details-container .details-content.details-height {
max-height: 220px !important;
}
}
/* ─── 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 ~84px tiles as the container will
take. Mobile drops the tile/icon/font another notch. */
.tour-what-to-bring-list {
margin: 0;
padding: 0;
display: grid;
/* Cap tile max-width so a row with only a few items doesn't stretch them
into wide rectangles with tiny centred icons. Tracks centre within the
container so short rows aren't left-aligned. */
grid-template-columns: repeat(auto-fit, minmax(84px, 120px));
gap: 8px;
justify-content: center;
list-style: none;
}
/* Specificity bumped to (0,2,1) so font-size beats the later mobile rule
`.tour-section li { font-size: 15px }` lower in the file. */
.tour-section .tour-what-to-bring-list li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 8px 4px 6px;
font-size: 12px;
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: 32px;
height: 32px;
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; }
@media (max-width: 767px) {
.tour-what-to-bring-list {
grid-template-columns: repeat(auto-fit, minmax(68px, 96px));
gap: 6px;
}
.tour-section .tour-what-to-bring-list li {
padding: 6px 3px 5px;
font-size: 11px;
}
.wtb-tile-icon {
width: 24px;
height: 24px;
}
}
/* ─── 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: 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 #ececec;
box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
z-index: 1040;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tour-sticky-cta-price {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.tour-sticky-cta-from {
font-size: 10px;
color: #8a8f98;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.tour-sticky-cta-amount-row {
display: inline-flex;
align-items: baseline;
gap: 2px;
margin-top: 2px;
}
.tour-sticky-cta-amount {
font-size: 22px;
font-weight: 800;
color: #1a1a1a;
letter-spacing: -0.01em;
}
.tour-sticky-cta-currency {
font-size: 13px;
font-weight: 700;
color: #4a4f57;
}
.tour-sticky-cta-per {
font-size: 11px;
color: #8a8f98;
font-style: italic;
margin-top: 1px;
}
.tour-sticky-cta-btn {
flex-shrink: 0;
margin-left: auto;
min-width: 152px;
height: 48px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(255, 87, 34, 0.28);
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.tour-sticky-cta-btn:hover,
.tour-sticky-cta-btn:focus {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(255, 87, 34, 0.32);
}
.tour-sticky-cta-btn:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(255, 87, 34, 0.24);
}
.tour-sticky-cta-btn-arrow {
font-size: 13px;
transition: transform 160ms ease;
}
.tour-sticky-cta-btn:hover .tour-sticky-cta-btn-arrow {
transform: translateX(2px);
}
@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: calc(76px + env(safe-area-inset-bottom)); }
}
/* ─── 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; }
}
/* ===== Tour description prose — Editorial Lite baseline ===== */
.tour-section-overview .details-content.tour-prose {
font-family: 'Ubuntu', system-ui, sans-serif;
font-size: 17px; line-height: 1.7; color: #5b5246;
}
.tour-prose p { margin: 0 0 16px; }
.tour-prose h2,
.tour-prose h3,
.tour-prose h4 {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700; color: #2c2620;
letter-spacing: -0.01em; line-height: 1.3;
margin: 40px 0 14px; padding-top: 20px;
border-top: 1px solid #f0eee9;
}
.tour-prose h2 { font-size: 26px; }
.tour-prose h3 { font-size: 24px; }
.tour-prose h4 { font-size: 22px; }
.tour-prose h2 strong,
.tour-prose h3 strong,
.tour-prose h4 strong { font-weight: inherit; }
.tour-prose strong { color: #2c2620; font-weight: 700; }
.tour-prose i,
.tour-prose em { font-family: Georgia, serif; font-style: italic; color: #2c2620; }
.tour-prose a {
color: #c97a3c; text-decoration: underline;
text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tour-prose a:hover { color: #a05f29; }
.tour-prose ul { list-style: none; padding: 0; margin: 16px 0; }
.tour-prose ul li {
position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 1.6;
}
.tour-prose ul li::before {
content: "•"; color: #c97a3c;
position: absolute; left: 4px; top: -2px;
font-size: 20px; font-weight: 700;
}
.tour-prose ol { padding-left: 24px; margin: 16px 0; }
.tour-prose ol li { padding-left: 6px; margin-bottom: 10px; color: #5b5246; }
.tour-prose ol li::marker { color: #c97a3c; font-weight: 700; }
.tour-prose blockquote {
margin: 24px 0; padding: 18px 22px;
background: #fdfaf4; border-left: 3px solid #c97a3c;
font-family: Georgia, serif; font-style: italic;
font-size: 18px; color: #2c2620;
}
.tour-prose img {
max-width: 100%; height: auto;
border-radius: 4px; margin: 24px 0;
}
.tour-prose table {
width: 100%; border-collapse: collapse;
margin: 20px 0; font-size: 16px;
}
.tour-prose th,
.tour-prose td {
padding: 10px 12px;
border-bottom: 1px solid #f0eee9;
text-align: left;
}
.tour-prose th { background: #fbf8f2; color: #2c2620; font-weight: 700; }
/* ===== Truncation + softer fade + pill CTA ===== */
.tour-section-overview .details-content.details-height {
max-height: 480px !important;
}
.tour-section-overview .details-content.details-height::after {
height: 80px;
}
.tour-section-overview .details-more,
.tour-section-overview .details-less {
width: fit-content;
margin: 16px 0 8px;
padding: 9px 22px;
border: 1px solid #c97a3c; border-radius: 999px;
color: #c97a3c; font-weight: 600;
text-decoration: none;
transition: background .15s, color .15s;
}
.tour-section-overview .details-more:hover,
.tour-section-overview .details-less:hover {
background: #c97a3c; color: #fff;
text-decoration: none;
}
/* The complex-tour markup nests an inside .details-less (for scroll-back to
#main-caption); without this, the link's global teal color overrides the pill. */
.tour-section-overview .details-less a {
color: inherit;
text-decoration: none;
}
.tour-section-overview .details-less:hover a {
color: inherit;
}
/* ===== Main-package collapse: same editorial pill as Overview =====
.tour-main-collapsible wraps Overview + Itinerary/Included + Important +
WTB + Menu behind a single show-more toggle. The button needs the same
terracotta pill treatment as the Overview-only collapse so the two
togglers look consistent on the page. Height clip stays at the
.details-height default (154px) per product call. */
.tour-main-collapsible .details-more,
.tour-main-collapsible .details-less {
width: fit-content;
margin: 16px 0 8px;
padding: 9px 22px;
border: 1px solid #c97a3c; border-radius: 999px;
color: #c97a3c; font-weight: 600;
text-decoration: none;
transition: background .15s, color .15s;
}
.tour-main-collapsible .details-more:hover,
.tour-main-collapsible .details-less:hover {
background: #c97a3c; color: #fff;
text-decoration: none;
}
/* ===== Mobile ===== */
@media (max-width: 767px) {
.tour-section-overview .details-content.tour-prose { font-size: 16px; }
.tour-prose h2 { font-size: 22px; }
.tour-prose h3 { font-size: 21px; }
.tour-prose h4 { font-size: 20px; }
.tour-section-overview .details-content.details-height {
max-height: 360px !important;
}
.tour-section-overview .details-content.details-height::after {
height: 60px;
}
}
/* ===== Magazine Feature modifier (additive) ===== */
.tour-section-overview .details-content.tour-prose--feature { line-height: 1.75; color: #2c2620; }
.tour-prose--feature h2 { font-size: 30px; }
.tour-prose--feature h3 { font-size: 28px; }
.tour-prose--feature h4 { font-size: 26px; }
.tour-prose--feature h2,
.tour-prose--feature h3,
.tour-prose--feature h4 {
border-top: none; padding-top: 22px; position: relative;
}
.tour-prose--feature h2::before,
.tour-prose--feature h3::before,
.tour-prose--feature h4::before {
content: ""; position: absolute; top: 0; left: 0;
width: 36px; height: 2px; background: #c97a3c;
}
.tour-prose--feature > p:nth-of-type(3)::first-letter {
font-family: Georgia, serif; font-size: 64px;
line-height: .85; font-weight: 400; color: #c97a3c;
float: left; padding: 8px 12px 0 0; margin-top: 2px;
}
.tour-prose--feature i,
.tour-prose--feature em { color: #5b5246; }
@media (max-width: 767px) {
.tour-prose--feature h2 { font-size: 24px; }
.tour-prose--feature h3 { font-size: 23px; }
.tour-prose--feature h4 { font-size: 22px; }
}
/* ===== Itinerary day tabs (active when Itinerary::useDays = true) ===== */
.tour-section-itinerary .tour-itinerary-tabs {
/* Container — scope hook only */
}
.tour-section-itinerary .tour-itinerary-tabs__nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
list-style: none;
margin: 0 0 18px;
padding: 0;
gap: 6px;
border-bottom: 1px solid #f0eee9;
-webkit-overflow-scrolling: touch;
}
.tour-section-itinerary .tour-itinerary-tabs__nav::-webkit-scrollbar {
display: none;
}
.tour-section-itinerary .tour-itinerary-tabs__nav li {
margin: 0;
padding: 0;
flex: 0 0 auto;
}
.tour-section-itinerary .tour-itinerary-tabs__tab {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
color: #5b5246;
font-family: 'Ubuntu', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 9px 18px;
margin-bottom: -1px;
border-radius: 6px 6px 0 0;
cursor: pointer;
white-space: nowrap;
transition: color .15s, background .15s, border-color .15s;
}
.tour-section-itinerary .tour-itinerary-tabs__tab:hover {
color: #c97a3c;
background: #fdfaf4;
}
.tour-section-itinerary .tour-itinerary-tabs__tab.active {
color: #c97a3c;
background: #fbf8f2;
border-color: #f0eee9 #f0eee9 #fbf8f2;
}
.tour-section-itinerary .tour-itinerary-tabs__panel {
display: none;
}
.tour-section-itinerary .tour-itinerary-tabs__panel.active {
display: block;
}
@media (max-width: 767px) {
.tour-section-itinerary .tour-itinerary-tabs__tab {
font-size: 12px;
padding: 8px 14px;
}
}
/* ===== Reusable editorial pill CTA =====
Same look as `.tour-section-overview .details-more` (terracotta outline,
hover-fills) but available on any element so we don't have to wrap each
button in a `.tour-section-overview` ancestor. Used by the
"Show more reviews" button in reviews-section.blade.php. */
.tour-pill-cta {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 9px 22px;
background: transparent;
border: 1px solid #c97a3c;
border-radius: 999px;
color: #c97a3c;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background .15s, color .15s;
}
.tour-pill-cta:hover,
.tour-pill-cta:focus-visible {
background: #c97a3c;
color: #fff;
text-decoration: none;
outline: none;
}