/* guide-v1 (sazanisland.tours, gramabay.tours, bluecave.today): loaded after site.css and
   booking-widget.css on guide sites only; Dafina and Bristan never ship it. Colours are the
   Triton palette of site.css (navy #142743/#0d1f3c, accent #c24a25, teal #2a6876). */

/* Wordmark: the two-word name of a guide site (SAZAN ISLAND, BLUE CAVE). The words are separated
   by a real space (text extraction keeps them apart), so the second word needs no margin. */
body[data-template="guide-v1"] .wordmark>span{white-space:nowrap}
body[data-template="guide-v1"] .wordmark b{margin-left:0}

/* Home hero: the guide sites always shade the photo, so the H1 (a full question-answer
   headline) stays readable; without a photo (drafts) the hero is a plain navy band. */
.guide-hero .hero-content{padding-bottom:44px}
.guide-hero h1{font-size:clamp(36px,4.6vw,66px);max-width:860px}
.guide-hero .hero-intro{max-width:640px;font-size:19px}
.guide-hero .trip-summary{margin-top:26px}
.guide-hero--text{background:#0d1f3c;height:auto;min-height:0}
.guide-hero--text .hero-content{padding-top:150px}

/* Photo-led page heading (pageHeading with an image): photo and H1 side by side. The photo follows
   the heading in the HTML (the text starts with the H1) and is shown first: left, or on top. */
.guide-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:44px;max-width:1178px;width:86%;margin:36px auto 18px}
.guide-lead__photo{margin:0;min-width:0;order:-1}
.guide-lead__photo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.guide-lead__photo figcaption{font-size:13px;line-height:1.5;margin-top:8px;color:#405568}
.guide-lead__heading{min-width:0}
.guide-lead__heading .eyebrow{margin-bottom:14px}
.guide-lead__heading h1{font-size:clamp(32px,3.6vw,52px)}
.guide-lead__heading p:last-child{margin-top:20px;color:#506075;font-size:18px}
body[data-guide-photo] .booking-section{padding-top:20px}

/* Question sections: one H2, an answer-first paragraph, optional photo, list and link.
   A readable measure (about 70 characters) and smaller headings than the landing H2s. */
.guide-section{max-width:860px;padding-top:56px;padding-bottom:20px}
.guide-section+.guide-section{padding-top:36px}
.guide-section h2{font-size:clamp(27px,2.6vw,38px);margin-bottom:20px;scroll-margin-top:24px}
.guide-section p{color:#334b5e}
.guide-section>p:first-of-type{color:#142743;font-size:18px}
.guide-section-photo{margin:24px 0}
.guide-section-photo img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:12px}
.guide-section-photo figcaption,.guide-photo figcaption{font-size:13px;line-height:1.5;margin-top:8px;color:#405568}
.guide-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.guide-list li{position:relative;padding-left:26px;color:#334b5e}
.guide-list li::before{content:"";position:absolute;left:4px;top:.68em;width:9px;height:9px;border-radius:50%;background:#2a6876}
.guide-section-link{margin-top:22px}
.guide-section-link .text-link,.faq-link .text-link{font-size:15px}
.guide-note{max-width:860px;padding-top:20px;padding-bottom:20px}
.guide-note p{padding:16px 20px;border-left:3px solid #2a6876;background:#f3f7f8;border-radius:0 8px 8px 0;color:#334b5e;font-size:16px}
.guide-photo{height:auto;margin:20px auto;max-width:1178px;width:86%}
.guide-photo img{height:auto;max-height:600px;aspect-ratio:16/9}

/* Route: the start and the return of the day frame the numbered stops (only the stops are
   numbered, as in the TouristTrip of the page). */
.route-end{max-width:850px;border-top:2px solid #d5e1e5;padding-top:14px;margin:0 0 30px}
.route-end h3{font-size:20px;line-height:1.2;margin:0 0 6px}
.route-end p{font-size:15px;color:#506075}

/* FAQ: answers may carry one link (to a sister site only once that site is live). The "+" marker
   is drawn here, not written into the summary, so the question reads alone in plain-text
   extraction; "/ ''" gives it no text for assistive technology. */
.faq .faq-link{margin-top:12px}
.faq summary::after{content:"+";content:"+"/"";flex-shrink:0;font-size:24px;color:#b44623}

/* Sources and the visible "Updated" date that closes every indexable page. */
.guide-sources{max-width:860px;padding-top:40px;padding-bottom:10px}
.guide-sources h2{font-size:22px;letter-spacing:-.02em;margin-bottom:14px}
.guide-sources ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.guide-sources .text-link{font-size:15px;font-weight:750;overflow-wrap:anywhere}
.guide-updated{max-width:1370px;margin:0 auto;padding:18px 7% 56px;font-size:13px;font-weight:750;letter-spacing:.04em;color:#5b6b7d}
.cta-band+.guide-updated{padding-top:24px}

/* Footer: the page in every language as plain links (the header's select needs JavaScript). */
.footer-languages ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:700;max-width:760px}
.footer-languages a[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* Galleries of 3 to 8 photos (site.css lays out 1 and 2). */
.gallery-count-3{grid-template-columns:1.3fr 1fr;grid-template-rows:230px 230px}
.gallery-count-4{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:230px 230px}
.gallery-count-4 .photo-0{grid-row:span 2}
.gallery-count-4 .photo-3{grid-column:2/span 2}
.gallery-count-5,.gallery-count-6,.gallery-count-7,.gallery-count-8{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:240px}
.gallery-count-5 .photo-0,.gallery-count-6 .photo-0,.gallery-count-7 .photo-0,.gallery-count-8 .photo-0{grid-row:span 2}
.guide-gallery-strip .gallery-intro{margin:-14px 0 26px;color:#506075;max-width:640px}

/* Contact: the ownership sentence under the office details. */
.contact-ownership{margin-top:18px;padding-top:16px;border-top:1px solid #d9e2e7;color:#405568;font-size:15px}

/* Key facts as lists: the chips (duration, departure) and the location bar under the home hero
   are <ul>s on guide pages; site.css styles the bay-v1 versions, rows of spans. */
ul.chips,ul.location-bar{margin:0;list-style:none}
ul.chips{padding:0}
.chips>li{background:#eef4f5;border-radius:4px;padding:4px 9px;font-size:12px;font-weight:800}

/* Gallery tiles: a figure, with the photo inside the button that opens the photo dialog and the
   caption over the photo (site.css styles the bay-v1 tile: a button with a caption span). Clicks on
   the caption reach the button; the focus ring goes round the whole tile, as on bay-v1. */
figure.photo{margin:0}
.photo>button{display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit}
.photo>figcaption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:40px 22px 18px;background:linear-gradient(transparent,#071729cc);font-size:15px;font-weight:800;line-height:1.4;overflow-wrap:anywhere;pointer-events:none}
/* The arrow that marks a tile as openable is drawn here, so the caption text is only the caption. */
.photo>figcaption::after{content:"\2197";content:"\2197"/"";flex-shrink:0}
.photo>button:focus-visible{outline-offset:-5px}
@supports selector(:has(a)){
 .photo:has(>button:focus-visible){outline:3px solid #0071eb;outline-offset:5px}
 .photo>button:focus-visible{outline:none}
}

/* The icons of the date and guide-language fields of the booking widget, drawn here, so the
   field's text is only its value (bay-v1 pages write them as aria-hidden text, booking-widget.css
   .widget-icon); "/ ''" gives them no text for assistive technology. */
.widget-input-shell::before{content:"\25A3";content:"\25A3"/"";display:grid;place-items:center;width:25px;height:25px;margin:0 3px 0 7px;color:#536273;font-size:18px;line-height:1}
.guide-field .widget-input-shell::before{content:"\25CE";content:"\25CE"/""}

/* Review cards: a figure with the verbatim review as a blockquote and its author as the caption.
   Date and "original text" label are darker than in site.css: 5.5:1 on white (WCAG AA). */
figure.review-card{margin:0}
.review-card__date,.review-card__original{color:#5b6b7d}

/* Sources: the cited titles are <cite>, in the style of their link. */
.guide-sources cite{font-style:normal}

@media(max-width:1100px){
 .photo>figcaption{padding:35px 16px 16px}
}
@media(max-width:850px){
 .guide-lead{grid-template-columns:minmax(0,1fr);gap:22px;width:88%;margin-top:24px}
 .guide-section{padding-top:44px}
 .gallery-count-3,.gallery-count-4{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:220px}
 .gallery-count-3 .photo-0{grid-column:1/-1;grid-row:auto}
 .gallery-count-4 .photo-0{grid-row:auto}
 .gallery-count-4 .photo-3{grid-column:auto}
 .gallery-count-5,.gallery-count-6,.gallery-count-7,.gallery-count-8{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
}
@media(max-width:620px){
 .guide-hero h1{font-size:clamp(30px,8.4vw,44px)}
 .guide-hero .hero-intro{font-size:17px}
 .guide-lead__photo img{border-radius:9px;max-height:240px}
 .guide-lead__heading h1{font-size:clamp(28px,7.7vw,36px)}
 .guide-lead__heading p:last-child{font-size:16px}
 .guide-section{padding-top:36px}
 .guide-section h2{font-size:clamp(24px,6.6vw,30px)}
 .guide-section>p:first-of-type{font-size:17px}
 .guide-photo{width:88%}
 .gallery-count-3,.gallery-count-4,.gallery-count-5,.gallery-count-6,.gallery-count-7,.gallery-count-8{grid-template-columns:1fr;grid-auto-rows:240px}
 .gallery-count-3 .photo-0,.gallery-count-5 .photo-0,.gallery-count-6 .photo-0,.gallery-count-7 .photo-0,.gallery-count-8 .photo-0{grid-row:auto;grid-column:auto}
 .guide-updated{padding-bottom:40px}
 .location-bar li:last-child{display:none}
 .photo>figcaption{gap:5px;padding:40px 18px 17px}
}