/* ==========================================================================
   Casa Manuel Antonio — brand.css
   Thin layer ON TOP of the live Webflow bundle (webflow.css). The non-Webflow
   pages are built almost entirely from Webflow's OWN classes (.hero-section,
   .heading-2, .section/.sectionlight, .common-heading-div, ._3x2-grid,
   .reward-card, .large-paragraph, .blog-detail-rich-text, …) so they render
   identically. This file only adds what Webflow has no class for:
     1) a static hero background image (live uses a <video>; our pages use a photo)
     2) the gallery grid + lightbox
     3) the contact form
   No custom typography or section system lives here anymore.

   NOTE ON THE NAV: there is deliberately NO nav/menu CSS here. The header is
   copied verbatim from the live site and driven by Webflow's own runtime, so
   Webflow's nav component owns the slide-in menu end to end. A hand-rolled
   overlay used to live here and had to be deleted: it pinned `.nav-menu` with
   `visibility:hidden` + `translateX(100%)` behind a `.nav-open` class that
   only our old script ever set, which silently held the REAL Webflow menu
   off-screen. Do not re-add nav styling here — change it in the Designer and
   re-run scripts/sync-webflow-shell.mjs.
   ========================================================================== */

/* ---- 1) Static hero background image (replaces the homepage <video>) ------ */
/* Mirrors .background-video: full-height, dark gradient overlay, so heading
   contrast matches the live hero exactly. */
.hero-bg-image {
  height: 100vh;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: column;
  position: relative;
}
.hero-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, var(--🎨-color--black-400, #0006), var(--🎨-color--black-400, #0006));
}
.hero-bg-image > .container { position: relative; z-index: 1; }
/* center hero content vertically like the live video hero */
.hero-section .container.hero-flex {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Breadcrumb above article body — uses the existing .small-paragraph look. */
.cma-breadcrumb { margin-bottom: var(--_📐-spacing---1️⃣-spacing--space-md, 24px); }
.cma-breadcrumb a { color: var(--sunset-terracotta, #b9907e); text-decoration: none; }
.cma-breadcrumb a:hover { text-decoration: underline; }
.cma-breadcrumb span { opacity: .5; margin: 0 .5em; }

/* Make explore/guide hero text left-aligned variant available (live uses
   .hero-detail-wrapper which is centered; our internal pages keep centered). */

/* Cards on the Explore hub reuse .reward-card; add a title/*kicker* using
   existing heading/paragraph classes. Only the hover lift is custom. */
.explore-card { text-decoration: none; color: inherit; display: block; }
.explore-card .reward-image-div { transition: transform .4s ease; }
.explore-card:hover .reward-image-div { transform: translateY(-4px); }
.explore-card-body { margin-top: var(--_📐-spacing---1️⃣-spacing--space-sm, 18px); text-align: center; }

/* ==========================  3) Gallery + lightbox  ======================== */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: var(--_📐-spacing---1️⃣-spacing--space-xxl, 60px); }
.gallery-filter {
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600;
  color: var(--volcanic, #2f2e2c); background: transparent;
  border: 1px solid rgba(47,46,44,.25); padding: 9px 18px; border-radius: 100px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gallery-filter:hover { border-color: var(--volcanic, #2f2e2c); }
.gallery-filter.is-active { background: var(--volcanic, #2f2e2c); color: #fff; border-color: var(--volcanic, #2f2e2c); }
/* Uniform tiles: an even grid reads as a considered set, where the previous
   CSS-columns masonry made the ragged source aspect ratios look like a
   rendering fault. Every photo is cropped to the same 4:3 window via
   object-fit, so nothing is letterboxed or stretched. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-item {
  margin: 0; padding: 0; border: 0; width: 100%; display: block;
  cursor: zoom-in; background: #f8f6ef; overflow: hidden; position: relative; line-height: 0;
}
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center;
  display: block; transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item[hidden] { display: none; }
.gallery-credit-badge {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  font-size: 10px; letter-spacing: .04em; color: #fff;
  background: rgba(47,46,44,.55); padding: 3px 8px; border-radius: 100px; opacity: 0; transition: opacity .25s ease;
}
.gallery-item:hover .gallery-credit-badge { opacity: 1; }
.gallery-empty { text-align: center; font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif); opacity: .7; padding: 40px 0; }

.lb { position: fixed; inset: 0; z-index: 4000; display: none; background: rgba(20,20,19,.94); align-items: center; justify-content: center; }
.lb.is-open { display: flex; }
.lb-stage { max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.lb-img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.lb-caption { margin-top: 14px; text-align: center; color: #f4f1ea; max-width: 760px; font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif); font-size: 14px; line-height: 1.5; }
.lb-credit { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .05em; color: #b9b6ae; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; cursor: pointer; padding: 18px; opacity: .8; transition: opacity .2s; }
.lb-btn:hover { opacity: 1; }
.lb-prev { left: max(8px, 2vw); } .lb-next { right: max(8px, 2vw); }
.lb-arrow { width: 20px; height: 20px; border-top: 2px solid #fff; border-left: 2px solid #fff; display: block; }
.lb-prev .lb-arrow { transform: rotate(-45deg); } .lb-next .lb-arrow { transform: rotate(135deg); }
.lb-close { position: absolute; top: max(10px,2vw); right: max(10px,2vw); width: 40px; height: 40px; background: none; border: 0; cursor: pointer; opacity: .85; font-size: 0; }
.lb-close::before, .lb-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; background: #fff; }
.lb-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.lb-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.lb-counter { position: absolute; top: max(14px,2.2vw); left: max(14px,2.2vw); color: #cfcbc2; font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif); letter-spacing: .2em; font-size: 12px; }
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .lb-btn { padding: 10px; } }

/* ==========================  4) Contact form  ============================= */
/* Uses Webflow's own .contact-form (max-width 750, centered) + .button; adds
   the field system the template's contact page CSS never shipped. Inputs match
   the footer .newsletter-input look: solid white blocks, no border, on the
   sectionlight background. */
.contact-form-block { margin: 0 auto; }
.cma-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--_📐-spacing---1️⃣-spacing--space-lg, 32px) 24px;
}
.cma-field { display: flex; flex-direction: column; }
.cma-field-full { grid-column: 1 / -1; }
.cma-field label {
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600;
  color: var(--volcanic, #2f2e2c);
  margin-bottom: 10px;
}
.cma-req { color: var(--sunset-terracotta, #b9907e); margin-left: 2px; }
.cma-optional { opacity: .5; text-transform: none; letter-spacing: .02em; font-weight: 400; }
.cma-input {
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  font-size: var(--_🅰️-typography---3️⃣-paragraph-font-size--paragraph, 16px);
  line-height: var(--_🅰️-typography---5️⃣-line-height--medium, 1.5);
  color: var(--🎨-color--gray-900, #1c1c1a);
  background-color: var(--🎨-color--white, #fff);
  border: 0; border-radius: 0;
  width: 100%;
  padding: 18px;
  transition: box-shadow .2s ease;
}
.cma-input::placeholder { color: var(--🎨-color--gray-400, #9b978e); opacity: 1; }
.cma-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--driftwood-sand, #bca989); }
.cma-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232f2e2c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.cma-select:invalid, .cma-select option[value=""] { color: var(--🎨-color--gray-400, #9b978e); }
.cma-select option { color: var(--🎨-color--gray-900, #1c1c1a); }
input[type="date"].cma-input { min-height: 60px; -webkit-min-logical-height: 60px; }
input[type="date"].cma-input:not(:focus):not(:valid) { color: var(--🎨-color--gray-400, #9b978e); }
.cma-textarea { resize: vertical; min-height: 140px; }
.cma-submit-div { margin-top: var(--_📐-spacing---1️⃣-spacing--space-xl, 48px); display: flex; justify-content: center; }
.cma-submit-div .w-button { width: auto; padding-left: 48px; padding-right: 48px; }
.cma-submit-div .w-button[disabled] { opacity: .6; cursor: wait; }
.cma-hp-wrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cma-form-done {
  text-align: center;
  background-color: var(--🎨-color--white, #fff);
  padding: var(--_📐-spacing---1️⃣-spacing--space-xxl, 60px) var(--_📐-spacing---1️⃣-spacing--space-lg, 32px);
  max-width: 750px; margin: 0 auto;
}
.cma-form-done .large-paragraph { max-width: 480px; margin: 16px auto 0; }
.cma-form-fail {
  max-width: 750px; margin: var(--_📐-spacing---1️⃣-spacing--space-md, 24px) auto 0;
  text-align: center;
  border: 1px solid var(--sunset-terracotta, #b9907e);
  padding: 16px 20px;
}
.cma-form-fail a { color: var(--sunset-terracotta, #b9907e); }
@media (max-width: 767px) {
  .cma-form-grid { grid-template-columns: 1fr; gap: var(--_📐-spacing---1️⃣-spacing--space-md, 24px); }
}

/* Tables inside article rich-text (itineraries, quick-facts). Webflow has no
   table class in this project, so style to match its type system. */
.blog-detail-rich-text table { width: 100%; border-collapse: collapse;
  margin: var(--_📐-spacing---1️⃣-spacing--space-lg, 32px) 0;
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif); font-size: 16px; }
.blog-detail-rich-text th, .blog-detail-rich-text td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(47,46,44,.12); vertical-align: top;
  color: var(--volcanic-light, #4e4d4b); }
.blog-detail-rich-text thead th {
  text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600;
  color: var(--sunset-terracotta, #b9907e); border-bottom: 1.5px solid var(--driftwood-sand, #bca989); }

/* ==========  5) Long-form guide typography (.blog-detail-rich-text)  ========
   Webflow's bundle only styles `p`, `h2` and `blockquote` inside
   .blog-detail-rich-text — and it sets `p { margin-bottom: 0 }`. Everything
   else (h3, lists, links, tables, images) falls through to browser defaults,
   which is why guide bodies rendered as an unspaced wall of text with default
   blue links. Webflow's own /blog-posts template has the same problem; since
   only Home and Suites are the fidelity reference, we style guides properly
   here rather than reproducing that.
   Type stays on-brand: Cardo for the body (Webflow's choice for blog detail),
   brand brown for links, Webflow's own spacing tokens for rhythm.            */

.blog-detail-rich-text {
  --cma-ink: var(--🎨-color--gray-900, #3d3d3d);
  --cma-body: var(--🎨-color--gray-500, #6d6d6d);
  --cma-brown: #8b6843;
}

/* Paragraph rhythm — overrides Webflow's margin-bottom:0 and its semi-bold
   body weight, which is too heavy for a serif at reading size. */
.blog-detail-rich-text p {
  margin-bottom: 1.35em;
  font-weight: var(--_🅰️-typography---6️⃣-font-weight--normal, 400);
  letter-spacing: 0;
  line-height: 1.75;
}
.blog-detail-rich-text > *:last-child { margin-bottom: 0; }

/* Headings. Webflow spaces h2 already; h3/h4 had no rules at all and were
   inheriting the base display sizes, landing almost as large as h2. */
.blog-detail-rich-text h2 {
  /* Webflow sets margin-top AND margin-bottom to space-xxl (60px desktop),
     which left a heading floating equidistant between the section above and
     its own first paragraph. Keep the generous space ABOVE (it separates
     sections) and tighten below so the heading binds to the text it labels. */
  margin: 1.5em 0 .4em;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--cma-ink);
}
.blog-detail-rich-text h3 {
  margin: 2.2em 0 .55em;
  font-family: var(--_🅰️-typography---1️⃣-font-family--cardo, Cardo, serif);
  font-size: clamp(22px, 2.2vw, 27px);
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--cma-ink);
}
.blog-detail-rich-text h4 {
  margin: 1.8em 0 .5em;
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cma-ink);
}
.blog-detail-rich-text h2 + p,
.blog-detail-rich-text h3 + p,
.blog-detail-rich-text h4 + p { margin-top: 0; }

/* Links — were rendering as default browser blue. */
.blog-detail-rich-text a {
  color: var(--cma-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(139, 104, 67, .4);
  transition: text-decoration-color .2s, color .2s;
}
.blog-detail-rich-text a:hover { text-decoration-color: var(--cma-brown); }

/* Lists — unstyled before, so bullets and indentation were missing. */
.blog-detail-rich-text ul,
.blog-detail-rich-text ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
  color: var(--cma-body);
  font-size: var(--_🅰️-typography---3️⃣-paragraph-font-size--large-paragraph);
  line-height: 1.7;
}
.blog-detail-rich-text ul { list-style: disc; }
.blog-detail-rich-text ol { list-style: decimal; }
.blog-detail-rich-text li { margin-bottom: .5em; padding-left: .2em; }
.blog-detail-rich-text li::marker { color: var(--cma-brown); }
.blog-detail-rich-text li > ul,
.blog-detail-rich-text li > ol { margin: .5em 0 0; }

.blog-detail-rich-text strong { color: var(--cma-ink); font-weight: 700; }
.blog-detail-rich-text em { font-style: italic; }

/* Tables — several guides use comparison tables. */
.blog-detail-rich-text table {
  width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
  font-family: var(--_🅰️-typography---1️⃣-font-family--sora, Sora, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cma-body);
}
.blog-detail-rich-text th,
.blog-detail-rich-text td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(47, 46, 44, .14);
  text-align: left;
  vertical-align: top;
}
.blog-detail-rich-text th {
  font-weight: 600;
  color: var(--cma-ink);
  border-bottom-color: rgba(47, 46, 44, .35);
  letter-spacing: .02em;
}
.blog-detail-rich-text tr:last-child td { border-bottom: 0; }
/* Wide tables scroll rather than forcing the page sideways on mobile. */
.blog-detail-rich-text .table-scroll { overflow-x: auto; }

.blog-detail-rich-text img { max-width: 100%; height: auto; display: block; margin: 1.6em 0; }
.blog-detail-rich-text hr {
  border: 0; border-top: 1px solid rgba(47, 46, 44, .16); margin: 2.4em 0;
}

/* Breadcrumb above the article. */
.cma-breadcrumb { margin-bottom: 2em; }
.cma-breadcrumb span { opacity: .5; margin: 0 .5em; }
.cma-breadcrumb a { color: inherit; text-decoration: none; }
.cma-breadcrumb a:hover { color: #8b6843; }

/* ==========  6) Explore hub cards  =========================================
   `.home-about-paragraph` is centred with a 500px max-width — right for a
   section intro, wrong inside a card, where it left the title and description
   fused together with no gap. Left-align and give the pair real spacing.     */
.explore-card { text-decoration: none; display: block; }
.explore-card-body { display: flex; flex-direction: column; gap: .55em; }
.explore-card-body h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-align: left;
  transition: color .2s;
}
.explore-card-body .large-paragraph.home-about-paragraph {
  max-width: none;
  margin: 0;
  text-align: left;
  line-height: 1.6;
}
.explore-card:hover h3 { color: #8b6843; }
.explore-card .reward-image-div img { transition: transform .6s ease; }
.explore-card:hover .reward-image-div img { transform: scale(1.03); }

/* ==========  7) Short panoramic page banner  ===============================
   A 21:5 band used where a full-height hero is more weight than the page
   needs (Gallery). The image must be a genuine horizontal panorama — villa
   and interior shots get sliced badly at this ratio; see `bannerSlug` in
   scripts/gallery-sources.json.

   The gradient is not decoration: the site header is fixed and transparent at
   scroll-top with a WHITE logo, so the top of the band has to stay dark
   enough for the logo and MENU to read against it.                          */
.hero-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 21 / 5;
  /* Never so short that the fixed header covers the heading, never so tall
     that it turns back into a hero. */
  min-height: 300px;
  max-height: 460px;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 20, 19, .55) 0%, rgba(20, 20, 19, .12) 45%, rgba(20, 20, 19, .30) 100%);
}
.hero-band .hero-heading-div { position: relative; z-index: 1; text-align: center; }
.hero-band h1 { margin: 0; color: #fff; }

@media (max-width: 767px) {
  /* 21:5 gets too letterboxed to read on a phone. */
  .hero-band { aspect-ratio: 16 / 7; min-height: 240px; }
}

/* Guide hero subtitle. Home pairs two SHORT lines at equal size ("Exceptional
   at / Every Level"), which is a stylistic pairing rather than a hierarchy.
   Guide titles are long on both sides of the colon, so at equal size the split
   still produced a four-line wall. Drop the qualifier to a true subtitle. */
.guide-hero-heading h2.heading-2 {
  margin-top: .3em;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.25;
  letter-spacing: 0;
}

/* Explore card images: fix a uniform ratio. They were rendering at each
   photo's natural aspect, so a portrait-ish hero made one card in a row taller
   than its neighbours and the grid looked misaligned. Same treatment as the
   gallery tiles. */
.explore-card .reward-image-div { overflow: hidden; }
.explore-card .reward-image,
.explore-card .reward-image-div img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Explore grid rhythm. Webflow's ._3x2-grid uses the SAME row and column gap,
   and .reward-card puts an identical gap between a card's image and its text.
   The result was ambiguous: the space under a description (separating two
   cards) matched the space under an image (joining an image to its own
   caption), so a title read as belonging to the card above it rather than to
   the picture directly over it.

   Fix the relationship rather than the numbers: bind image->text tight, and
   push cards apart. Column gap is left alone. */
.explore-grid .reward-card {
  grid-row-gap: 12px;          /* image -> its own title: close */
  grid-column-gap: 12px;
}
.explore-grid {
  grid-row-gap: 68px;          /* card -> next card: clearly separate */
}
@media (max-width: 991px) {
  .explore-grid { grid-row-gap: 52px; }
}
@media (max-width: 767px) {
  .explore-grid { grid-row-gap: 44px; }
}