/* San Teodoro Beach Villa v3 — inner pages.
   legacy.css (the v2 stylesheet) still lays these pages out; this file gives
   them the v3 look: typefaces, colours, rounded photos, buttons. */

:root {
  --ink: #0e2a3b;
  --navy: #0b2533;
  --navy-deep: #081c28;
  --sea: #0a7a7c;
  --coral: #b8136c;
  --sand: #ffd9ec;
  --cream: #ddf1ed;
  --paper: #f3f8f7;
  --sage: #ddf1ed;
  --line: rgba(14, 42, 59, 0.2);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
}

body { background: var(--sv-ground); color: var(--sv-ink); font-family: var(--sv-body); }
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* Headings: heavy grotesque, with the emphasised line in italic serif. */
h1, h2 { font-family: var(--sv-display); font-weight: 800; letter-spacing: -0.04em; line-height: .96; text-wrap: balance; }
h3 { font-family: var(--sv-display); }
h1 em, h2 em { font-family: var(--sv-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--sv-accent); }
h1 { font-size: clamp(3.2rem, 7.4vw, 7.4rem); }
h2 { font-size: clamp(2.6rem, 5.2vw, 5.4rem); }
.lead { font-family: var(--sv-serif); line-height: 1.3; }
.eyebrow { color: var(--sv-sea); font-size: .8125rem; letter-spacing: .16em; }
.eyebrow.light { color: #fff; }
.eyebrow svg { display: none; }

/* Buttons and text links */
.button { min-height: 54px; padding: 0 28px; gap: 12px; border-radius: 999px; border-color: var(--sv-deep); background: var(--sv-deep); font-family: var(--sv-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.button:hover { background: var(--sv-accent); border-color: var(--sv-accent); }
.button-coral { background: var(--sv-accent); border-color: var(--sv-accent); }
.button-coral:hover { background: var(--sv-accent-dark); border-color: var(--sv-accent-dark); }
.button-outline-light { background: transparent; border-color: rgba(255, 255, 255, .6); }
.button svg { stroke-width: 2; }
.text-link { gap: 12px; padding-bottom: 6px; border-bottom-width: 2px; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.text-link:hover { color: var(--sv-accent); }

/* Page top */
.inner-hero { min-height: 560px; }
.inner-hero-shade { background: linear-gradient(90deg, rgba(8, 28, 40, .84), rgba(8, 28, 40, .25)), linear-gradient(0deg, rgba(8, 28, 40, .45), transparent 55%); }
.inner-hero-copy { padding-top: 110px; padding-bottom: 70px; }
.inner-hero-copy h1 { font-size: clamp(3.2rem, 7.4vw, 7.4rem); line-height: .92; max-width: 1000px; }
.inner-hero-copy h1 em { color: var(--sv-blush); }
.inner-hero-copy > p { font-family: var(--sv-body); font-size: 1.19rem; line-height: 1.55; max-width: 620px; }
.breadcrumbs { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; }
.guide-cover-shade { background: rgba(8, 28, 40, .66); }
.guide-cover h1 { font-size: clamp(2.8rem, 6vw, 6rem); line-height: .95; }
.standard-page h1, .legal-page h1 { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .95; }

/* Photos: rounded like the home page */
main figure, .gallery-button, .map-frame, .guide-library img, .host-picks img, .more-picks img { border-radius: 20px; }
main figure { overflow: hidden; }
main figcaption { font-family: var(--sv-body); }
.gallery-button span { border-radius: 0 14px 0 0; font-size: .75rem; letter-spacing: .04em; text-transform: none; }
.gallery-filters button { border-radius: 999px; font-family: var(--sv-body); }
.lightbox { background: rgba(8, 28, 40, .96); }
.lightbox img { border-radius: 12px; }

/* Panels and cards */
.info-cards article, .pick-grid article, .contact-form, .editorial-copy, .editorial-note { border-radius: 22px; }
.info-cards article, .pick-grid article, .editorial-copy { background: #fff; }
.info-cards span, .pick-grid span { font-family: var(--sv-serif); font-style: italic; font-size: 1.9rem; font-weight: 400; line-height: 1; color: var(--sv-sea); }
.info-cards h3, .pick-grid h3 { font-family: var(--sv-display); font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.info-cards p, .pick-grid p { font-size: 1rem; }
.editorial-note { border-left: 0; background: var(--sv-mint); }
.villa-editorial-grid { grid-template-rows: minmax(330px, auto) minmax(330px, auto); }
.villa-metrics strong, .house-rules dd { font-family: var(--sv-display); font-weight: 700; color: var(--sv-ink); }
.villa-metrics span { font-size: .8125rem; }
.faq-list summary, .article-index a { font-family: var(--sv-display); font-weight: 700; letter-spacing: -0.01em; }
.faq-list details p { font-size: 1rem; }
.prose h2, .legal-wrap h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -0.03em; }
.prose h3 { font-family: var(--sv-display); font-weight: 700; }
.prose p, .legal-wrap p, .prose li { font-size: 1.06rem; }

/* Dark bands keep the blush accent */
.bathroom-tour-copy h2 em, .amenity-panel h2 em, .location-card h2 em, .experience-photo-story h2 em { color: var(--sv-blush); }

/* Closing band on every inner page */
.page-booking-cta { background: var(--sv-deep); color: #fff; padding-block: clamp(72px, 9vw, 120px); }
.page-booking-cta h2 { color: #fff; font-size: clamp(2.6rem, 6vw, 5.4rem); }
.page-booking-cta h2 em { color: var(--sv-blush); }
.page-booking-cta .eyebrow { justify-content: center; color: var(--sv-mist); }
.page-booking-cta p { color: var(--sv-pale); }

/* Contact form */
.contact-form { background: #fff; }
.contact-form > label { font-size: .875rem; letter-spacing: .02em; text-transform: none; }
.contact-form input:not([type="checkbox"]), .contact-form textarea { margin-top: 8px; padding: 13px 14px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-ground); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--sv-sea); outline: 3px solid var(--sv-sea); outline-offset: 1px; }
.contact-form .consent { font-size: .875rem; }
.contact-form .consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.contact-form .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-detail > span { font-size: .8125rem; color: var(--sv-sea); }

.sv-map-fallback { margin: 0; padding: 40px; }

/* Small print across the inner pages: nothing below 13px */
.legal-date, .legal-cin, .house-rules dt, .room-grid article > span, .space-grid article > span { font-size: .8125rem; }
main figcaption, .check-list li, .editorial-copy > span, .villa-metrics span, .gallery-filters button { font-size: .8125rem; }

/* Arrows inside links always stay icon-sized. */
main a > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.travel-alert { border-radius: 22px; background: var(--sv-deep); }
.travel-alert > strong { font-family: var(--sv-display); font-weight: 700; color: var(--sv-blush); }
.travel-alert a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.contact-form .consent { display: block; position: relative; padding-left: 32px; line-height: 1.5; }
.contact-form .consent input { position: absolute; left: 0; top: 1px; margin: 0; }