/*
 * Serenity V4: readability and balance layer.
 *
 * Loaded after every V4 stylesheet and scoped to body.serenity-readable, so
 * turning it off (Serenity V4 → SEO técnico → Diseño) restores the original
 * compiled design exactly. It only changes type sizes, spacing and the booking
 * form layout; colours, fonts and the approved structure stay as they are.
 *
 * Scale: body copy 17px (16px on phones), UI text 14–15px, captions and
 * meta 13px. Nothing visible stays below 12px.
 */

/* ---------- Body copy ---------- */
.serenity-readable .sbr-prose p,
.serenity-readable .sbr-prose li,
.serenity-readable .sbr-prose ul,
.serenity-readable .sbr-prose ol { font-size: 17px; line-height: 1.75; }
.serenity-readable .sbr-prose p { margin-bottom: 20px; }
.serenity-readable .sbr-prose li { margin-bottom: 8px; }
.serenity-readable .sbr-prose h3 { font-size: 21px; line-height: 1.35; margin: 30px 0 10px; }
.serenity-readable .sbr-prose table { font-size: 15px; }
.serenity-readable .sbr-lead { font-size: 18px; line-height: 1.7; }
.serenity-readable .sbr-extra,
.serenity-readable .sbr-post-copy > p:not(.sbr-article-meta),
.serenity-readable .sbr-post-featured .sbr-post-copy > p:not(.sbr-article-meta) { font-size: 16px; line-height: 1.75; }
.serenity-readable .feature p,
.serenity-readable .split-copy p,
.serenity-readable .section-header p,
.serenity-readable .intro-description p,
.serenity-readable .hero-description,
.serenity-readable .equipment-layout > div > p,
.serenity-readable .destination-heading p { font-size: 17px; line-height: 1.75; }
.serenity-readable .equipment-row p,
.serenity-readable .benefit-list li,
.serenity-readable .booking-inner p,
.serenity-readable .route-footer p,
.serenity-readable .destination-foot p,
.serenity-readable .blog-card > p:not(.meta) { font-size: 15px; line-height: 1.7; }

/* ---------- Headings inside cards and lists ---------- */
.serenity-readable .route-link h3,
.serenity-readable .benefits h3 { font-size: 16px; line-height: 1.4; }

/* ---------- UI: buttons, links, navigation ---------- */
.serenity-readable .btn,
.serenity-readable .hero-actions .btn,
.serenity-readable .sbr-actions .btn { font-size: 15px; letter-spacing: .01em; }
.serenity-readable .text-link,
.serenity-readable .booking-inner .text-link,
.serenity-readable .feature .text-link,
.serenity-readable .destination .text-link,
.serenity-readable .blog-card > .text-link,
.serenity-readable .destination-foot .text-link,
.serenity-readable .route-footer .text-link { font-size: 14px; }
.serenity-readable #primary-nav,
.serenity-readable .dropdown-menu a,
.serenity-readable .nav-book { font-size: 14px; }
.serenity-readable .eyebrow,
.serenity-readable .sbr-kicker,
.serenity-readable .hero-location,
.serenity-readable .destination-label { font-size: 13px; letter-spacing: .08em; }
.serenity-readable .sbr-breadcrumb { font-size: 13px; }
.serenity-readable .sbr-facts > div { font-size: 15px; }
.serenity-readable .floating-contact { font-size: 14px; }
.serenity-readable #route-filter button,
.serenity-readable .photo-selector button,
.serenity-readable .gallery-controls button[data-gallery-open],
.serenity-readable #gallery-counter,
.serenity-readable .sbr-gallery-counter,
.serenity-readable .sbr-pagination button { font-size: 13px; }
.serenity-readable .sbr-toc > a { font-size: 14px; line-height: 1.5; }
.serenity-readable .sbr-toc strong { font-size: 14px; }

/* ---------- FAQ ---------- */
.serenity-readable .sbr-faq summary { font-size: 17px; line-height: 1.45; }
.serenity-readable .sbr-faq p,
.serenity-readable .sbr-faq li { font-size: 16px; line-height: 1.75; }

/* ---------- Captions, meta, small print ---------- */
.serenity-readable .client-photo figcaption,
.serenity-readable .client-film-player figcaption,
.serenity-readable .sbr-article-body .client-photo figcaption,
.serenity-readable .boat-caption,
.serenity-readable .hero-postcard .postcard-caption,
.serenity-readable .destination-photo figcaption span:last-child { font-size: 13px; line-height: 1.5; }
.serenity-readable .client-context-label { font-size: 12px; }
.serenity-readable .client-photo-ribbon .client-ribbon-intro p { font-size: 15px; line-height: 1.6; }
.serenity-readable .sbr-article-meta,
.serenity-readable .blog-card .meta { font-size: 13px; }
.serenity-readable .sbr-small,
.serenity-readable .hero-note,
.serenity-readable .sbr-image-fallback small { font-size: 14px; line-height: 1.6; }

/* ---------- Footer ---------- */
.serenity-readable .footer h2 { font-size: 14px; }
.serenity-readable .footer-links,
.serenity-readable .footer-links a,
.serenity-readable .social-heading + a { font-size: 15px; line-height: 1.9; }
.serenity-readable .footer-note,
.serenity-readable .media-credits,
.serenity-readable .media-credits summary { font-size: 13px; }

/* ---------- Route links block (inc/seo-links.php) ---------- */
.serenity-readable .serenity-route-links a { font-size: 13px; }

/* ---------- Booking form: balanced two columns ----------
 * The section holds three items (intro, privacy note, form). The original
 * grid let the note take the right column and pushed the form under the intro.
 * Intro stays left; the form owns the right column with the note under it. */
.serenity-readable .sbr-form-section {
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	column-gap: 72px;
	row-gap: 14px;
	align-items: start;
	padding-block: 80px 96px;
}
.serenity-readable .sbr-form-section > div:first-child { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 120px; }
.serenity-readable .sbr-form-section > .sbr-preview-form { grid-column: 2; grid-row: 1; }
.serenity-readable .sbr-form-section > .serenity-enquiry-note,
.serenity-readable .sbr-form-section > .sbr-small { grid-column: 2; grid-row: 2; margin: 0; color: var(--muted, #59686c); }
.serenity-readable .sbr-form-section h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.15; }
.serenity-readable .sbr-form-note { font-size: 17px; line-height: 1.7; max-width: 440px; margin-block: 20px 28px; }
.serenity-readable .sbr-preview-form {
	padding: 40px 44px;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(9, 47, 60, .08);
}
.serenity-readable .sbr-form-fields { gap: 22px 24px; margin-bottom: 28px; }
.serenity-readable .sbr-form-fields label,
.serenity-readable .sbr-form-fields legend { font-size: 15px; font-weight: 600; color: var(--ink, #092f3c); line-height: 1.4; }
.serenity-readable .sbr-form-fields label > input:not([type=radio]),
.serenity-readable .sbr-form-fields select,
.serenity-readable .sbr-form-fields textarea {
	font-size: 16px; /* 16px keeps iOS from zooming into the field. */
	font-weight: 400;
	min-height: 54px;
	padding: 14px 16px;
	margin-top: 8px;
	border-radius: 6px;
	border-color: #a9bec5;
}
.serenity-readable .sbr-form-fields label > input:focus,
.serenity-readable .sbr-form-fields textarea:focus {
	outline: 3px solid rgba(43, 108, 238, .25);
	outline-offset: 1px;
	border-color: var(--blue, #2b6cee);
}
.serenity-readable .sbr-form-fields fieldset { padding: 16px 18px 10px; border: 1px solid #c9d8dc; border-radius: 6px; background: rgba(255, 255, 255, .55); }
.serenity-readable .sbr-form-fields legend { padding: 0 6px; margin-bottom: 4px; }
.serenity-readable .sbr-form-fields fieldset label { font-size: 16px; font-weight: 400; min-height: 44px; margin-right: 22px; gap: 10px; cursor: pointer; }
.serenity-readable .sbr-form-fields input[type=radio] { width: 20px; height: 20px; }
.serenity-readable .sbr-preview-form button[type=submit] { width: 100%; min-height: 58px; font-size: 16px; justify-content: center; }
.serenity-readable .sbr-form-result { font-size: 15px; }

/* ---------- Blog search: 16px so phones don't zoom into the field ---------- */
.serenity-readable .sbr-blog-search input { font-size: 16px; min-height: 50px; }
.serenity-readable .sbr-blog-search label { font-size: 14px; }

/* ---------- Content sections: steadier rhythm ---------- */
.serenity-readable .sbr-content-section .sbr-content-grid { align-items: start; }
.serenity-readable .sbr-content-heading h2 { line-height: 1.15; }

/* ---------- Tablets ---------- */
@media (max-width: 1080px) {
	.serenity-readable .sbr-form-section { column-gap: 44px; }
	.serenity-readable .sbr-preview-form { padding: 32px; }
}

/* ---------- Phones ---------- */
@media (max-width: 680px) {
	.serenity-readable .sbr-prose p,
	.serenity-readable .sbr-prose li,
	.serenity-readable .feature p,
	.serenity-readable .split-copy p,
	.serenity-readable .section-header p,
	.serenity-readable .intro-description p,
	.serenity-readable .hero-description,
	.serenity-readable .equipment-layout > div > p,
	.serenity-readable .destination-heading p { font-size: 16px; line-height: 1.7; }
	.serenity-readable .sbr-lead { font-size: 17px; }
	.serenity-readable .sbr-faq summary { font-size: 16px; }
	.serenity-readable .btn,
	.serenity-readable .hero-actions .btn,
	.serenity-readable .sbr-actions .btn { font-size: 15px; }
	.serenity-readable .sbr-form-section { grid-template-columns: 1fr; row-gap: 24px; padding-block: 48px 64px; }
	.serenity-readable .sbr-form-section > div:first-child,
	.serenity-readable .sbr-form-section > .sbr-preview-form,
	.serenity-readable .sbr-form-section > .serenity-enquiry-note,
	.serenity-readable .sbr-form-section > .sbr-small { grid-column: 1; grid-row: auto; position: static; }
	.serenity-readable .sbr-form-note { max-width: none; }
	.serenity-readable .sbr-preview-form { padding: 24px 20px; }
	.serenity-readable .sbr-form-fields { grid-template-columns: 1fr; gap: 18px; }

	/* Photo galleries and destination cards: two per row instead of one,
	 * so a page of photos doesn't turn into a very long scroll. */
	.serenity-readable .serenity-location-gallery .client-photo-grid,
	.serenity-readable .serenity-location-gallery .client-photo-grid.four,
	.serenity-readable .serenity-location-gallery .client-photo-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.serenity-readable .serenity-location-gallery .client-photo-grid .client-photo:nth-child(2) { padding-top: 0; }
	.serenity-readable .serenity-location-gallery figcaption { display: none; }
	.serenity-readable .serenity-location-gallery .client-ribbon-intro { display: block; }
	.serenity-readable .serenity-location-index .sbr-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.serenity-readable .serenity-location-index h3 { font-size: 15px; margin-top: 8px; }
	.serenity-readable .serenity-location-index .sbr-related-item svg { display: none; }

	/* Same order as desktop: intro, form, then the privacy note under the form. */
	.serenity-readable .sbr-form-section > div:first-child { grid-row: 1; }
	.serenity-readable .sbr-form-section > .sbr-preview-form { grid-row: 2; }
	.serenity-readable .sbr-form-section > .serenity-enquiry-note,
	.serenity-readable .sbr-form-section > .sbr-small { grid-row: 3; }
}

/* Blog: market-price disclaimer with Serenity's own prices. */
.serenity-readable .serenity-price-note { margin: 24px 0; padding: 20px 24px; background: var(--sea); border-left: 3px solid var(--blue); border-radius: 4px; font-size: 15px; line-height: 1.7; }

/* Contáctanos "Antes de escribirnos": intro under the heading. */
.serenity-readable .serenity-contact-extras__intro { margin-top: 18px; color: var(--muted, #59686c); line-height: 1.75; max-width: 500px; }