/* Casa Joya Nerja, proposal: visible logo and navigation, readable details, reviews earlier. */
.sj-v2 {
  --sj-ink: #282b2f;
  --sj-muted: #5e5a54;
  --sj-surface: #f2f0e6;
  --sj-accent: #8a6a55;
  --sj-accent-ink: #fff;
  --sj-line: rgba(40, 43, 47, 0.12);
  --sj-font: Inter, sans-serif;
}

/* The logo was 102px wide and very pale on cream: almost invisible. */
.sj-v2 .navbar-brand img { width: 190px !important; max-width: 190px; filter: saturate(2.2) brightness(0.5) contrast(1.2); }
.sj-v2 .navbar-logo-left .nav-link { color: var(--sj-ink) !important; font-weight: 500; }

/* Hero headline sat on top of the photo edge; give it its own line height and room. */
.sj-v2 .grid-home-hero h1, .sj-v2 .grid-home-hero .heading-style-h1 { line-height: 1.02; }

/* "2 min drive · 4 min walking": the numbers were tiny and pale on copper. */
.sj-v2 .section-distant-from-the-house .text-size-tagline.minutes { font-size: 18px !important; font-weight: 600; color: #fff !important; }
.sj-v2 .section-distant-from-the-house .text-size-small-white { font-size: 13px !important; opacity: 0.9; }
.sj-v2 .section-distant-from-the-house .information { opacity: 1 !important; }

/* Reviews right after the introduction, with a little more air. */
.sj-v2 .bookingmood-reviews-holiday-home { padding-top: 56px; padding-bottom: 56px; }

/* One column for the whole page: every section uses 5% side padding with content capped at 1280px (like
   "What makes us unique"). The booking calendar and reviews sections had no padding and sat in Webflow's
   940px box, so they ran wider on laptops and narrower on large screens. */
.sj-v2 [class^="bookingmood-"] { padding-left: 5%; padding-right: 5%; }
.sj-v2 [class^="bookingmood-"] > .w-container { width: 100% !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
.sj-v2 .base-container:has(.sjv2-video) { width: 100%; max-width: 1280px; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
.sj-v2 .sjv2-video { max-width: none !important; }

/* ---- Homepage structure (see extra() in casajoyanerja.js) ---- */

/* New sections and titles reuse the existing section-title style; this only spaces them. */
.sj-v2 { --sjv2-section-y: clamp(64px, 8vw, 112px); }
.sj-v2 .sjv2-heading { margin-bottom: clamp(28px, 4vw, 48px); }
.sj-v2 .sjv2-heading .text-size-tagline, .sj-v2 .sjv2-eyebrow { margin-bottom: 14px; }
.sj-v2 .sjv2-heading h2 { margin: 0; }
.sj-v2 .sjv2-heading.is-light h2 { color: var(--sj-surface); }
/* The location sentence was a 60px headline; now it's the subtitle under the "Location" title. */
.sj-v2 .sjv2-subtitle { font-size: 28px !important; line-height: 1.3 !important; font-weight: 200 !important; margin-top: 0 !important; }

/* Image bands (45 minutes from Málaga, Stunning views): the same space above and below. */
.sj-v2 .section-book-now, .sj-v2 .section-view-casa-joya-homepage { margin-top: var(--sjv2-section-y); margin-bottom: var(--sjv2-section-y); }
.sj-v2 :is(.section-book-now, .section-view-casa-joya-homepage) + *,
.sj-v2 :is(.section-book-now, .section-view-casa-joya-homepage) + * > .container { padding-top: 0 !important; }
.sj-v2 :has(+ :is(.section-book-now, .section-view-casa-joya-homepage)),
.sj-v2 :has(+ :is(.section-book-now, .section-view-casa-joya-homepage)) > .container { padding-bottom: 0 !important; }

/* Map: in the empty right-hand column next to the contact form. */
.sj-v2 .sjv2-map { align-self: stretch; min-height: 420px; }
.sj-v2 .sjv2-map iframe { display: block; width: 100% !important; height: 100% !important; min-height: 420px; border-radius: 10px; box-shadow: 0 24px 60px -24px rgba(48, 34, 24, .4); background: #e9e6dc; }

/* Film hero: the silent loop full width, the page title over it; "Have a look inside" plays it with sound. */
.sj-v2 .sjv2-hero { position: relative; min-height: min(86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: #1d1f22; }
.sj-v2 .sjv2-hero .sjv2-film { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.sj-v2 .sjv2-hero .sjv2-film::after { background: linear-gradient(to top, rgba(20,16,12,.72), rgba(20,16,12,.25) 55%, rgba(20,16,12,.35)); }
.sj-v2 .sjv2-hero .sjv2-film__btn { display: none; }
.sj-v2 .sjv2-hero__content { position: relative; z-index: 2; width: 100%; max-width: calc(1280px + 10%); margin: 0 auto; padding: 0 5% clamp(40px, 7vw, 96px); color: var(--sj-surface); }
.sj-v2 .sjv2-hero__content h1 { color: var(--sj-surface) !important; margin: 10px 0 18px; max-width: 12ch; }
.sj-v2 .sjv2-hero__content .text-size-tagline { color: var(--sj-surface) !important; }
.sj-v2 .sjv2-hero__content h2 { color: var(--sj-surface) !important; max-width: 30ch; margin: 0; }
.sj-v2 .sjv2-hero:has(.sjv2-film.is-playing) .sjv2-hero__content { display: none; }
.sj-v2 .sjv2-hero:has(.sjv2-film.is-playing) { align-items: stretch; }
.sj-v2 .sjv2-hero .sjv2-cta--film { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sj-v2 .sjv2-hero .sjv2-cta--film:hover, .sj-v2 .sjv2-hero .sjv2-cta--film:focus-visible { background: rgba(255,255,255,.26); }
.sj-v2 .sjv2-hero .sjv2-cta__dot { background: #fff; color: var(--sj-ink); }
.sj-v2 .sjv2-hero .sjv2-cta:focus-visible { outline-color: #fff; }
@media (max-width: 767px) { .sj-v2 .sjv2-hero { min-height: 78svh; } }
/* Playing with sound: a framed player in the middle of the hero, not the whole screen. */
.sj-v2 .sjv2-hero:has(.sjv2-film.is-playing) { align-items: center; justify-content: center; padding: 40px 5%; }
.sj-v2 .sjv2-hero .sjv2-film.is-playing { position: relative; inset: auto; width: min(960px, 100%, calc((min(86vh, 860px) - 80px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
@media (max-width: 767px) { .sj-v2 .sjv2-hero .sjv2-film.is-playing { width: 100%; } }

/* Key facts: same width as the booking calendar below, spread edge to edge. */
.sj-v2 .sjv2-facts__list { max-width: calc(1280px + 10%); padding: 18px 5%; justify-content: space-between; }
@media (max-width: 767px) { .sj-v2 .sjv2-facts__list { padding: 16px 5%; } }

/* About the house: the former hero photo next to the intro text. */
.sj-v2 .sjv2-about { padding: var(--sjv2-section-y) 5%; }
.sj-v2 .sjv2-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sj-v2 .sjv2-about__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.sj-v2 .sjv2-about__text h2 { margin: 0 0 28px; }
.sj-v2 .sjv2-cta--outline { padding: 14px 24px; border: 1px solid var(--sj-ink); }
.sj-v2 .sjv2-cta--outline:hover, .sj-v2 .sjv2-cta--outline:focus-visible { background: var(--sj-ink); color: var(--sj-surface); }
@media (max-width: 767px) { .sj-v2 .sjv2-about__grid { grid-template-columns: minmax(0, 1fr); } }

/* Hero: two calls to action. The film one is the playful one: a pulsing play dot. */
.sj-v2 .sjv2-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.sj-v2 .sjv2-cta {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  font: 500 14px/1 var(--sj-font); letter-spacing: .02em; color: var(--sj-ink); border-radius: 999px;
}
.sj-v2 .sjv2-cta--primary { padding: 15px 24px; background: var(--sj-accent); color: #fff; transition: background .2s ease; }
.sj-v2 .sjv2-cta--primary:hover, .sj-v2 .sjv2-cta--primary:focus-visible { background: #7a5c48; }
.sj-v2 .sjv2-cta--film { padding: 6px 18px 6px 6px; border: 1px solid var(--sj-line); background: rgba(255,255,255,.55); }
.sj-v2 .sjv2-cta--film:hover, .sj-v2 .sjv2-cta--film:focus-visible { background: #fff; }
.sj-v2 .sjv2-cta:focus-visible { outline: 2px solid var(--sj-ink); outline-offset: 3px; }
.sj-v2 .sjv2-cta__dot { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sj-ink); color: #fff; }
.sj-v2 .sjv2-cta__dot svg { width: 15px; height: 15px; margin-left: 2px; }
.sj-v2 .sjv2-cta__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sj-accent); animation: sjv2-pulse 2.2s ease-out infinite; }
@keyframes sjv2-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sj-v2 .sjv2-cta__dot::after { animation: none; opacity: 0; } }

/* Location: the copper block was placed at a fixed height to sit behind the map. With the map moved to the
   contact section, extra() in casajoyanerja.js moves the block to start just above the list of places. */

/* Book-direct offer card on the photo. */
.sj-v2 .section-lowest-booking-rate .bg-img-section-padding { display: flex; align-items: flex-end; min-height: min(70vh, 640px); padding-top: 64px !important; padding-bottom: 64px !important; }
.sj-v2 .sjv2-deal { display: flex; align-items: center; gap: 28px; max-width: 560px; padding: 28px 32px; border-radius: 14px; background: rgba(243, 239, 230, .96); box-shadow: 0 24px 60px -28px rgba(30, 22, 14, .55); }
.sj-v2 .sjv2-deal__pct { flex: 0 0 auto; font: 300 64px/0.9 Newsreader, Georgia, serif; color: var(--sj-accent); text-align: center; }
.sj-v2 .sjv2-deal__pct small { display: block; margin-top: 6px; font: 400 14px/1 "Bebas Neue", var(--sj-font); letter-spacing: 4px; text-transform: uppercase; }
.sj-v2 .sjv2-deal__text { padding-left: 28px; border-left: 1px solid var(--sj-line); }
.sj-v2 .sjv2-deal .sjv2-eyebrow { margin-bottom: 8px; }
.sj-v2 .sjv2-deal__title { margin: 0 0 6px; font: 400 26px/1.15 Newsreader, Georgia, serif; color: var(--sj-ink); }
.sj-v2 .sjv2-deal__sub { margin: 0; font: 400 15px/1.45 var(--sj-font); color: var(--sj-muted); }
@media (max-width: 767px) {
  .sj-v2 .section-lowest-booking-rate .bg-img-section-padding { min-height: 60svh; padding-top: 40px !important; padding-bottom: 24px !important; }
  .sj-v2 .sjv2-deal { gap: 18px; padding: 20px; }
  .sj-v2 .sjv2-deal__pct { font-size: 48px; }
  .sj-v2 .sjv2-deal__text { padding-left: 18px; }
  .sj-v2 .sjv2-deal__title { font-size: 21px; }
}

/* Section titles at the size of the hero title (the Webflow 120px ones were too loud). */
.sj-v2 :is(.heading-style-h1, .heading-style-h1-black, .heading-style-h1-black-usp, .heading-style-h1-black-usp-copy):not(.sjv2-hero *) { font-size: clamp(40px, 5.6vw, 80px) !important; line-height: 1 !important; }

/* Buttons: one system everywhere. Primary = copper pill; on photos = frosted white pill; blog categories = tag pills. */
.sj-v2 .w-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; padding: 15px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--sj-accent); color: #fff !important; font: 500 14px/1 var(--sj-font); letter-spacing: .02em; text-transform: none; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.sj-v2 .w-button:hover, .sj-v2 .w-button:focus-visible { background: #7a5c48; }
.sj-v2 :is(.button-color-off-white, .button-email-us).w-button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sj-v2 :is(.button-color-off-white, .button-email-us).w-button:hover, .sj-v2 :is(.button-color-off-white, .button-email-us).w-button:focus-visible { background: rgba(255,255,255,.26); }
.sj-v2 .button.category.w-button { padding: 10px 18px; background: transparent; border-color: var(--sj-line); color: var(--sj-ink) !important; font-size: 13px; }
.sj-v2 .button.category.w-button:hover, .sj-v2 .button.category.w-button:focus-visible { border-color: var(--sj-accent); color: var(--sj-accent) !important; background: transparent; }
.sj-v2 .button.category.w-button.w--current { background: var(--sj-accent); border-color: var(--sj-accent); color: #fff !important; }
.sj-v2 .submit-button.w-button { font-weight: 500; letter-spacing: .02em; }

/* Photo banners: content on the same edges as every other section, text on the left. */
.sj-v2 .container-bg-image .wrapper-align-right { align-items: flex-start; justify-content: flex-start; }
.sj-v2 .container-bg-image .wrapper-align-right .text-wrapper { text-align: left; }

/* "Nerja, Malaga": the Webflow grid had an empty first column, so the text started inset. */
@media (min-width: 992px) {
  .sj-v2 .grid-gallery-home { grid-template-columns: 450px repeat(3, minmax(0, 1fr)); }
  .sj-v2 .grid-gallery-home > :nth-child(1) { grid-column: 1 / 2 !important; }
  .sj-v2 .grid-gallery-home > :nth-child(2) { grid-column: 2 / 5 !important; }
  .sj-v2 .grid-gallery-home > :nth-child(3) { grid-column: 1 / 2 !important; }
  .sj-v2 .grid-gallery-home > :nth-child(4) { grid-column: 2 / 5 !important; }
  .sj-v2 .grid-gallery-home > :nth-child(5) { grid-column: 1 / 2 !important; }
  .sj-v2 .grid-gallery-home > :nth-child(6) { grid-column: 1 / 2 !important; justify-self: end; }
}

/* Location: one section on the off-white background, places as a quiet list. */
.sj-v2 .section-distant-from-the-house .menu-grid-wrapper { margin-top: clamp(32px, 4vw, 56px); }
.sj-v2 .section-distant-from-the-house .menu-item h4 { margin: 0; color: var(--sj-ink) !important; font: 400 24px/1.25 Newsreader, Georgia, serif !important; }
.sj-v2 .section-distant-from-the-house .item-digital-concierge:hover h4 { color: var(--sj-accent) !important; }
.sj-v2 .section-distant-from-the-house .line.maps { background: var(--sj-line) !important; margin: 12px 0 10px; }
.sj-v2 .sjv2-place-meta { font: 400 14px/1.4 var(--sj-font); color: var(--sj-muted); }
.sj-v2 .section-distant-from-the-house .w-dyn-items.w-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin: 0; }
.sj-v2 .section-distant-from-the-house .w-dyn-items.w-row::before, .sj-v2 .section-distant-from-the-house .w-dyn-items.w-row::after { display: none; }
.sj-v2 .section-distant-from-the-house .sites-cl-item.w-col { float: none; width: auto; padding: 0; }
.sj-v2 .section-distant-from-the-house :is(.menu-wrapper, .menu-item) { margin: 0; padding: 0; }
@media (max-width: 767px) { .sj-v2 .section-distant-from-the-house .w-dyn-items.w-row { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.sj-v2 .section-distant-from-the-house :is(.menu-wrapper, .menu-item, .item-digital-concierge) { width: 100%; max-width: none; }
@media (min-width: 992px) { .sj-v2 .back-image-and-color :is(.container, .container-bg-image), .sj-v2 .container-bg-image { padding-left: 0 !important; padding-right: 0 !important; } }
@media (max-width: 991px) { .sj-v2 .back-image-and-color :is(.container, .container-bg-image), .sj-v2 .container-bg-image { margin-left: 0 !important; margin-right: 0 !important; padding-left: 5% !important; padding-right: 5% !important; } }
.sj-v2 .w-button, .sj-v2 .button-banner { max-width: 100%; }
/* Legal pages: the policy text sat against the screen edge on phones. */
@media (max-width: 767px) { .sj-v2 .container-4.w-container { box-sizing: border-box; padding-left: 5%; padding-right: 5%; } }

/* Two heading sizes across the site: main section titles (with the small line above) and sub-headings. */
.sj-v2 .sjv2-title { font-size: clamp(40px, 5.6vw, 80px) !important; line-height: 1 !important; text-transform: uppercase !important; font-weight: 200 !important; }
.sj-v2 .sjv2-title:not(.text-color-off-white) { color: var(--sj-ink) !important; }
/* On a photo the title and its small line stay white. */
.sj-v2 .back-image-and-color :is(.sjv2-title, .sjv2-eyebrow) { color: var(--sj-surface) !important; }
.sj-v2 .sjv2-eyebrow + .sjv2-title { margin-top: 0 !important; }
.sj-v2 :is(.heading-style-h2, .heading-style-h2-2):not(.sjv2-title) { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.15 !important; }
.sj-v2 .container-bg-image .wrapper-align-right :is(.text-wrapper, .tagline-wrapper-x, .text-gallery-wrapper) { margin-left: 0 !important; text-align: left !important; justify-content: flex-start !important; }
/* No flash of the old Webflow hero while the script builds the film hero (it removes this section).
   Safety net: if the script never runs, the old hero shows again after 3s. */
@keyframes sjv2-show { to { visibility: visible; } }
.sj-v2 .section-hidden-gem { visibility: hidden; animation: sjv2-show 0s 3s forwards; }

/* Blog articles: readable body text and a calm heading scale (Webflow had 14px light text under 60px headings). */
.sj-v2 .w-richtext p, .sj-v2 .w-richtext li { font-size: 17px !important; line-height: 1.7 !important; font-weight: 400 !important; color: var(--sj-ink); }
.sj-v2 .w-richtext p { margin: 0 0 18px; }
.sj-v2 .w-richtext h2 { font: 400 clamp(28px, 3vw, 36px)/1.2 Newsreader, Georgia, serif !important; margin: 44px 0 14px !important; text-transform: none !important; }
.sj-v2 .w-richtext h3 { font: 400 clamp(22px, 2.2vw, 26px)/1.25 Newsreader, Georgia, serif !important; margin: 28px 0 10px !important; }
.sj-v2 .w-richtext ul, .sj-v2 .w-richtext ol { margin: 0 0 20px; padding-left: 22px; }
.sj-v2 .w-richtext li { margin-bottom: 6px; }
.sj-v2 .w-richtext a { color: var(--sj-accent); text-decoration: underline; text-underline-offset: 3px; }
.sj-v2 .w-richtext a:hover { color: #7a5c48; }
.sj-v2 .w-richtext strong { font-weight: 600; }
@media (max-width: 767px) { .sj-v2 .w-richtext p, .sj-v2 .w-richtext li { font-size: 16px !important; } }
/* Blog category pages: their own heading and intro above the posts. */
.sj-v2 .sjv2-cat-head { margin: 28px 0 32px; max-width: 760px; }
.sj-v2 .sjv2-cat-title { margin: 0 0 18px !important; font-size: clamp(40px, 5.6vw, 80px) !important; line-height: 1 !important; text-transform: uppercase; color: var(--sj-ink) !important; }
.sj-v2 .sjv2-cat-intro { margin: 0; font: 400 17px/1.65 var(--sj-font); color: var(--sj-muted); }
/* Registration numbers in the footer: the national one is 52 characters without spaces, let it wrap. */
.sj-v2 .sjv2-reg { overflow-wrap: anywhere; word-break: break-all; }