/* ==========================================================================
   SITE TEMPLATES
   Three complete looks for the public site, switched from Admin → Template.
   The wrapper element carries data-template="classic|forest|modern"; each
   template re-declares the theme's CSS variables (which cascade to every
   component) and then restyles the handful of pieces that use literal
   colors — buttons, the search card, headings, the hero overlay.

   CLASSIC is the original navy + gold and needs no rules: no attribute
   match means nothing here applies.
   ========================================================================== */

/* ============================== FOREST ==================================
   A lodge in the woods: deep evergreen, warm cedar, cream paper, serif
   display headings. Rounded and soft.                                     */

[data-template="forest"] {
  --primary-color: #16301f;
  --secondary-color: #c98f4e;
  --secondary-text: #b3793a;
  --teritiary-text: #16301f;
  --bg-color: #f6f2ea;
  --secondary-font: 'Playfair Display', Georgia, serif;
}

[data-template="forest"] h1,
[data-template="forest"] h2,
[data-template="forest"] h3,
[data-template="forest"] .page__title,
[data-template="forest"] .pdp-title,
[data-template="forest"] .breadcrumb .content h3,
[data-template="forest"] .sec-title h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 0;
}

[data-template="forest"] .main-btn,
[data-template="forest"] .btn.main-btn,
[data-template="forest"] .srch-cta {
  border-radius: 999px;
}

[data-template="forest"] .video-overlay {
  background: linear-gradient(180deg, rgba(11, 26, 16, .35), rgba(11, 26, 16, .55));
}

[data-template="forest"] .hh-sb {
  background: rgba(250, 246, 238, .94);
  border-radius: 28px;
}
[data-template="forest"] .hh-sb__go {
  border-radius: 999px;
  background: linear-gradient(135deg, #dba55f 0%, #c98f4e 50%, #a86f33 100%);
  color: #fff;
  box-shadow: 0 12px 26px -8px rgba(168, 111, 51, .6);
}
[data-template="forest"] .hh-sb__ic {
  background: rgba(22, 48, 31, .08);
  color: #2d5a3c;
  border-radius: 999px;
}
[data-template="forest"] .hh-sb__eyebrow {
  background: linear-gradient(120deg, #16301f, #2d5a3c);
}
[data-template="forest"] .hh-sb__seg.is-active,
[data-template="forest"] .hh-sb__seg-inner.is-active { background: rgba(201, 143, 78, .14); }

[data-template="forest"] footer { background-color: #12271a; }
[data-template="forest"] .footer_overlay { opacity: .35; }

[data-template="forest"] .featured-prop .content .price p,
[data-template="forest"] .abt-para p { color: #3d4a41; }

/* ============================== MODERN ==================================
   Flat, airy, near-black ink with an emerald accent. Sharp corners, thin
   borders instead of heavy shadows, generous whitespace.                  */

[data-template="modern"] {
  --primary-color: #101418;
  --secondary-color: #0f9d8a;
  --secondary-text: #0f9d8a;
  --teritiary-text: #101418;
  --bg-color: #f7f8f9;
  --border-color: #e5e8eb;
}

[data-template="modern"] h1,
[data-template="modern"] h2,
[data-template="modern"] h3 {
  letter-spacing: -0.01em;
}

[data-template="modern"] .main-btn,
[data-template="modern"] .btn.main-btn,
[data-template="modern"] .srch-cta {
  border-radius: 8px;
  box-shadow: none;
}

[data-template="modern"] .video-overlay {
  background: linear-gradient(180deg, rgba(16, 20, 24, .25), rgba(16, 20, 24, .55));
}

[data-template="modern"] .hh-sb {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e8eb;
  box-shadow: 0 18px 44px -18px rgba(16, 20, 24, .35);
}
[data-template="modern"] .hh-sb__go {
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a2 0%, #0f9d8a 55%, #0b7e70 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(15, 157, 138, .55);
}
[data-template="modern"] .hh-sb__ic {
  background: rgba(15, 157, 138, .1);
  color: #0f9d8a;
  border-radius: 10px;
}
[data-template="modern"] .hh-sb__eyebrow {
  background: #101418;
  border-radius: 8px;
}
[data-template="modern"] .hh-sb__seg.is-active,
[data-template="modern"] .hh-sb__seg-inner.is-active { background: rgba(15, 157, 138, .09); }
[data-template="modern"] .hh-sb__seg.is-active::after,
[data-template="modern"] .hh-sb__seg-inner.is-active::after { background: #0f9d8a; }

[data-template="modern"] .featured-prop .col-lg-3 .prop-image img,
[data-template="modern"] .prop-image img { border-radius: 10px; }

[data-template="modern"] .item .img-area img { border-radius: 10px; }

[data-template="modern"] footer { background-color: #101418; }

[data-template="modern"] .hh-crumbs__here { color: #fff; }

/* Wide-reaching accent swaps for pieces that hardcoded the old gold. */
[data-template="modern"] .save i { color: #0f9d8a; }

/* ==========================================================================
   STRUCTURAL DIFFERENCES — the templates change LAYOUT, not just paint.
   Classic keeps the original structure. Forest turns cards into framed
   postcards with arched attraction windows. Modern lays text OVER the
   photography, editorial-style, with monochrome-to-color hovers.
   ========================================================================== */

/* ============================ FOREST: structure ========================= */

/* Featured properties become framed POSTCARDS: cream mat, cedar hairline,
   photo inset, serif title, price in a forest-green pill. */
[data-template="forest"] .featured-prop .col-lg-3 {
  background: #fbf7ee;
  border: 1px solid #e5d9bf;
  border-radius: 18px;
  padding: 12px 12px 18px;
  box-shadow: 0 10px 24px -14px rgba(22, 48, 31, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
[data-template="forest"] .featured-prop .col-lg-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 34px -14px rgba(22, 48, 31, .45);
}
[data-template="forest"] .featured-prop .prop-image { overflow: hidden; border-radius: 12px; }
[data-template="forest"] .prop img { height: 230px; border-radius: 12px; }
[data-template="forest"] .prop .addr p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px; height: auto; -webkit-line-clamp: 1;
}
[data-template="forest"] .prop .price {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: #16301f; color: #f6f2ea;
  border-radius: 999px; padding: 5px 14px; margin-top: 10px;
  font-size: 13px;
}
[data-template="forest"] .prop .price p { color: #f6f2ea; font-size: 15px; }
[data-template="forest"] .prop .save { top: 26px; right: 34px; }

/* Attractions become ARCHED WINDOWS — the lodge-doorway shape — with the
   name on a cream ledge instead of floating over a dark wash. */
[data-template="forest"] section.featured-spaces .img-area {
  border-radius: 300px 300px 18px 18px;
  border: 6px solid #fbf7ee;
  outline: 1px solid #e5d9bf;
  box-shadow: 0 14px 30px -16px rgba(22, 48, 31, .4);
}
[data-template="forest"] section.featured-spaces .overlay {
  background: linear-gradient(180deg, rgba(11, 26, 16, 0) 45%, rgba(11, 26, 16, .78) 100%);
  border-radius: 300px 300px 14px 14px;
}
[data-template="forest"] section.featured-spaces .attr-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px; text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
[data-template="forest"] .attr-content .main-btn { border-radius: 999px; }

/* Featured spaces get the same soft arches. */
[data-template="forest"] section.amenities .prop-image { overflow: hidden; border-radius: 200px 200px 16px 16px; }
[data-template="forest"] section.amenities .prop-image img { border-radius: 200px 200px 16px 16px; }
[data-template="forest"] section.amenities h4 { font-family: 'Playfair Display', Georgia, serif; }

/* Search results become postcard rows: cream panel, inset photo, serif
   title, dashed cedar rule above the price line. */
[data-template="forest"] .srch-card {
  background: #fbf7ee;
  border: 1px solid #e5d9bf;
  border-radius: 20px;
  padding: 14px;
}
[data-template="forest"] .srch-card__media { border-radius: 14px; }
[data-template="forest"] .srch-card__t { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }
[data-template="forest"] .srch-card__foot { border-top: 1px dashed #d8c9a6; margin-top: 12px; }
[data-template="forest"] .srch-flag { border-radius: 999px; }

/* Attraction detail + about imagery follows the arch language. */
[data-template="forest"] .contact-page-section .inner-container > img { border-radius: 220px 220px 16px 16px !important; }

/* ============================ MODERN: structure ========================= */

/* Featured properties go FULL-BLEED EDITORIAL: taller photo, text laid OVER
   a bottom gradient, emerald price chip — nothing below the image at all. */
[data-template="modern"] .featured-prop .col-lg-3 { overflow: hidden; border-radius: 12px; }
[data-template="modern"] .featured-prop .prop-image {
  position: relative; overflow: hidden; border-radius: 12px;
}
[data-template="modern"] .prop img { height: 350px; border-radius: 12px; }
[data-template="modern"] .featured-prop .prop-image::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 20, 24, 0) 40%, rgba(16, 20, 24, .82) 100%);
  pointer-events: none;
}
[data-template="modern"] .featured-prop .content {
  position: absolute; left: 26px; right: 26px; bottom: 16px; z-index: 2;
  margin: 0; pointer-events: none;
}
[data-template="modern"] .featured-prop .content .addr { margin-top: 0; }
[data-template="modern"] .featured-prop .content .addr p {
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
[data-template="modern"] .featured-prop .content .loc,
[data-template="modern"] .featured-prop .content p,
[data-template="modern"] .featured-prop .content span { color: rgba(255, 255, 255, .82); }
[data-template="modern"] .featured-prop .content .price {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: #0f9d8a; color: #fff;
  border-radius: 7px; padding: 4px 10px; margin-top: 8px; font-size: 12px;
}
[data-template="modern"] .featured-prop .content .price p { color: #fff; font-size: 14px; font-weight: 700; }
[data-template="modern"] .featured-prop .col-lg-3:hover img { transform: scale(1.05); }

/* Attractions: monochrome photography that takes color on hover, name
   bottom-LEFT with a thin emerald rule — a gallery wall, not postcards. */
[data-template="modern"] section.featured-spaces .img-area { border-radius: 8px; }
[data-template="modern"] section.featured-spaces img {
  filter: grayscale(55%) contrast(1.04);
  transition: filter .4s ease, transform .5s ease;
}
[data-template="modern"] section.featured-spaces a:hover img { filter: none; transform: scale(1.03); }
[data-template="modern"] section.featured-spaces .overlay {
  background: linear-gradient(180deg, rgba(16, 20, 24, .05) 55%, rgba(16, 20, 24, .8) 100%);
  border-radius: 8px;
}
[data-template="modern"] .attr-content { text-align: left; padding: 0 24px; bottom: 24px; }
[data-template="modern"] section.featured-spaces .attr-content h3 {
  font-size: 19px; font-weight: 700; letter-spacing: .01em; text-shadow: none;
}
[data-template="modern"] section.featured-spaces .attr-content h3::after {
  content: ""; display: block; width: 34px; height: 3px; background: #0f9d8a; margin-top: 8px;
}
[data-template="modern"] .attr-content .main-btn {
  position: static; transform: none; width: auto; margin: 10px 0 0;
  background: transparent; border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px; font-size: 12px; padding: .45rem 1rem;
  display: inline-block; opacity: 0; transition: opacity .3s ease;
}
[data-template="modern"] section.featured-spaces a:hover .main-btn { opacity: 1; }
[data-template="modern"] section.featured-spaces a:hover .attr-content {
  bottom: 24px; transform: none;
}

/* Featured spaces: same flat, tight look. */
[data-template="modern"] section.amenities .prop-image { overflow: hidden; border-radius: 8px; }
[data-template="modern"] section.amenities .prop-image img {
  border-radius: 8px; filter: grayscale(35%);
  transition: filter .4s ease;
}
[data-template="modern"] section.amenities .am:hover .prop-image img { filter: none; }

/* Search results: hairline-bordered flat cards, emerald type label in
   small caps, no decoration anywhere it isn't needed. */
[data-template="modern"] .srch-card {
  background: #fff; border: 1px solid #e5e8eb; border-radius: 12px; padding: 14px;
  transition: border-color .2s ease;
}
[data-template="modern"] .srch-card:hover { border-color: #b9c0c7; }
[data-template="modern"] .srch-card__media { border-radius: 8px; }
[data-template="modern"] .srch-card__type {
  color: #0f9d8a; text-transform: uppercase; font-size: 11px;
  letter-spacing: .12em; font-weight: 700;
}
[data-template="modern"] .srch-card__t { letter-spacing: -0.01em; }
[data-template="modern"] .srch-card.is-hover .srch-card__t { text-decoration: none; color: #0f9d8a; }
[data-template="modern"] .srch-flag { border-radius: 5px; }

/* ---------- both alternates: give the slick arrows room on tall cards --- */
[data-template="forest"] .featured-prop .slick-list { padding-top: 6px; padding-bottom: 10px; }