/* ============================================================
   Cortijo Bujio — "Cal & Ándalus" Design System (Pilot)
   Light Moorish. Built to the Design Handbuch v1 · Juli 2026.
   ============================================================ */
:root{
  --bg:#FFFFFF;      /* Weiß — background */
  --panel:#F4EAD9;   /* Panel — awards/footer/alt blocks */
  --red:#9B2020;     /* Granada red — brand/buttons/numerals/eyebrows */
  --terra:#C96F43;   /* Terracotta — accent >=24px */
  --gold:#B8860B;    /* Gold — lines/frames/fretwork only */
  --olive:#7A8450;   /* Olive — nature accent */
  --ink:#2B2016;     /* Ink — headlines/nav */
  --body:#6B5844;    /* Body copy */
  --muted:#A07A4E;   /* Meta/captions only */
  --cream2:#FFE7C9;  /* warm cream for text-on-photo eyebrows */
  --scrim:linear-gradient(180deg,rgba(255,251,244,.10) 0%,rgba(255,251,244,0) 26%,rgba(74,40,20,.36) 58%,rgba(48,24,12,.74) 100%);
  --scrim-cta:linear-gradient(180deg,rgba(255,251,244,.08) 0%,rgba(201,111,67,0) 26%,rgba(96,42,20,.5) 58%,rgba(52,26,14,.72) 100%);
  --fret:repeating-linear-gradient(90deg,#9B2020 0 14px,#B8860B 14px 18px,#C96F43 18px 32px,#B8860B 32px 36px);
  --arch:50% 50% 8px 8px / 40% 40% 8px 8px;
  --pad-x:40px;
  --pad-y:clamp(72px,10vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font:400 16px/1.85 'Jost',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad-x)}
.sec{padding:var(--pad-y) 0}
.sec--panel{background:#fff}
.sec + .sec{border-top:1px solid rgba(184,134,11,.16)}

/* ---------- Ornament ---------- */
.fret{height:8px;background:var(--fret);width:100%}
.fret--top{height:10px}
.fret--foot{height:6px}
.rule-dot{width:64px;height:0;border-top:2px dotted var(--gold);margin:18px auto}
.rule-dot--left{margin:18px 0}

/* ---------- Typography ---------- */
.eyebrow{font:500 12px/1 'Jost',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.eyebrow--photo{color:var(--cream2);letter-spacing:.42em;text-shadow:0 1px 16px rgba(48,24,12,.8),0 1px 3px rgba(48,24,12,.6)}
.arabic--photo{text-shadow:0 1px 18px rgba(48,24,12,.85),0 1px 4px rgba(48,24,12,.6)}
.arabic-sub{font:400 italic 16px/1.2 'Cormorant Garamond',serif;letter-spacing:.14em;color:var(--cream2);margin:-8px 0 22px;text-shadow:0 1px 14px rgba(48,24,12,.8)}
.arabic{font:400 22px/1 'Amiri',serif;color:var(--gold)}
.arabic--photo{color:var(--cream2)}
h1,h2,h3{font-weight:400;color:var(--ink)}
.h2{font:400 clamp(40px,5vw,48px)/1.05 'Cormorant Garamond',serif;color:var(--ink);letter-spacing:0}
.h2 em{font-style:italic;color:var(--terra)}
.lead{font:400 clamp(19px,2.2vw,22px)/1.6 'Cormorant Garamond',serif;color:var(--body)}
.p{font:400 16px/1.85 'Jost',sans-serif;color:var(--body);margin:14px 0}
.eyebrow+.h2{margin-top:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font:400 12px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:14px 24px;cursor:pointer;transition:all .2s}
.btn--outline{border:1px solid var(--red);color:var(--red);background:transparent}
.btn--outline:hover{background:var(--red);color:#fff}
.btn--solid{border:1px solid var(--red);background:var(--red);color:#fff}
.btn--solid:hover{background:#821a1a;border-color:#821a1a}

/* ---------- Arch image (horseshoe) ---------- */
.arch-img{position:relative;border-radius:var(--arch);overflow:hidden;background:#e3d8c4;box-shadow:0 30px 64px -18px rgba(74,40,20,.34),0 6px 18px -8px rgba(74,40,20,.18)}
.arch-img::after{content:"";position:absolute;inset:0;border-radius:var(--arch);border:1px solid rgba(184,134,11,.55);box-shadow:inset 0 0 0 4px rgba(255,255,255,.14);pointer-events:none}
.arch-img img{width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.06) contrast(.97);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.arch-img:hover img{transform:scale(1.04)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--bg)}
.util{background:#fff;padding:12px var(--pad-x);font:400 11px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:16px}
.util a{color:var(--muted)}
.util a:hover{color:var(--red)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad-x);border-bottom:1px solid rgba(184,134,11,.5);gap:20px}
.nav-links{display:flex;gap:26px;align-items:center;flex:1}
.nav-links.right{justify-content:flex-end}
.nav-links a{font:400 12px/1 'Jost',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.nav-links a:hover{color:var(--red)}
.brand{font:400 20px/1 'Marcellus',serif;letter-spacing:.32em;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand .mark{width:34px;height:34px;flex:none}
.nav .btn--outline{padding:11px 20px;letter-spacing:.2em;font-size:11px}
.n-toggle{display:none;background:none;border:0;color:var(--ink);font-size:24px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(1.12) saturate(1.06)}
.hero-scrim{position:absolute;inset:0;background:var(--scrim)}
.hero-inner{position:relative;z-index:2;padding:0 24px 9vh;max-width:1000px}
.hero-inner .arabic{margin-bottom:18px}
.hero h1{font:400 clamp(58px,7vw,78px)/.98 'Cormorant Garamond',serif;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 10px rgba(48,24,12,.55),0 2px 30px rgba(48,24,12,.4)}
.hero h1 em{font-style:italic;color:var(--cream2)}
.hero-sub{margin-top:18px;font:400 clamp(17px,2vw,20px)/1.55 'Cormorant Garamond',serif;color:#FBF3E7;text-shadow:0 1px 12px rgba(48,24,12,.7)}

/* ---------- Award row ---------- */
.awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.award{padding:12px 34px;text-align:center;border-right:1px solid rgba(184,134,11,.35)}
.award:last-child{border-right:0}
.award-src{font:400 22px/1.1 'Marcellus',serif;color:var(--red)}
.award-q{font:400 italic 18px/1.5 'Cormorant Garamond',serif;color:#5B4A38;margin:12px 0}
.award-date{font:400 12px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Story split ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story--rev .story-media{order:-1}
.story-media{min-width:0}
.story-media .arch-img{aspect-ratio:4/5}
.story-body{min-width:0}
.story-body .h2{margin:14px 0 6px}
.story-body .btn{margin-top:22px}

/* ---------- Feature triptych ---------- */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.tri-cell{min-width:0;text-align:center}
.tri-cell .arch-img{width:100%;max-width:340px;aspect-ratio:3/4;margin:0 auto 24px}
.tri-num{font:400 italic 22px/1 'Cormorant Garamond',serif;color:var(--red)}
.tri-title{font:400 19px/1.2 'Marcellus',serif;letter-spacing:.05em;color:var(--ink);margin:8px 0 10px}
.tri-body{font:400 14px/1.7 'Jost',sans-serif;color:var(--body)}

/* ---------- Amenity list (cortijo) ---------- */
.amgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:16px}
.amrow{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(184,134,11,.28)}
.amn{font:400 italic 20px/1 'Cormorant Garamond',serif;color:var(--red);flex:none;width:34px}
.amt{font:400 15px/1.5 'Jost',sans-serif;color:var(--body)}

/* ---------- Rates table ---------- */
.rates{width:100%;border-collapse:collapse;background:#fff;border:1px solid rgba(184,134,11,.3)}
.rates caption{font:400 22px/1.3 'Cormorant Garamond',serif;color:var(--ink);padding-bottom:16px;caption-side:top;text-align:left}
.rates th{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);text-align:left;padding:14px 18px}
.rates td{font:400 15px/1.5 'Jost',sans-serif;color:var(--body);padding:13px 18px;border-bottom:1px solid rgba(184,134,11,.2)}
.rates tr:last-child td{border-bottom:0}
.rates td:last-child{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--red)}

/* ---------- Booking widget ---------- */
.widget{background:#fff;border:1px solid rgba(184,134,11,.32);box-shadow:0 16px 44px rgba(90,45,25,.07);padding:34px;max-width:640px;margin:0 auto}
.widget h3{font:400 26px/1.2 'Cormorant Garamond',serif;color:var(--ink);margin-bottom:6px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font:500 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:400 15px 'Jost',sans-serif;color:var(--ink);background:#fff;border:1px solid rgba(184,134,11,.4);padding:12px 14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.wprice{margin-top:18px;font:400 italic 22px/1.4 'Cormorant Garamond',serif;color:var(--red);text-align:center}
.wnote{font:400 12px/1.6 'Jost',sans-serif;color:var(--muted);margin-top:14px}

/* ---------- Article (guide) ---------- */
.article{max-width:760px;margin:0 auto}
.crumbs{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--red)}
.article h2{font:400 clamp(28px,3.4vw,34px)/1.15 'Cormorant Garamond',serif;color:var(--ink);margin:44px 0 4px}
.article h3{font:400 21px/1.3 'Marcellus',serif;color:var(--terra);margin:28px 0 4px}
.article p{font:400 17px/1.85 'Jost',sans-serif;color:var(--body);margin:16px 0}
.article a{color:var(--red);text-decoration:underline;text-decoration-color:rgba(155,32,32,.3);text-underline-offset:3px}
.article strong{color:var(--ink);font-weight:600}
.article em{font-style:italic}
.article ul{margin:16px 0 16px 4px;list-style:none}
.article li{position:relative;padding:6px 0 6px 24px;font:400 17px/1.7 'Jost',sans-serif;color:var(--body)}
.article li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;background:var(--gold);border-radius:2px;transform:rotate(45deg)}
.fig{margin:34px 0}
.fig .arch-img{max-width:600px;margin:0 auto}
.fig figcaption{font:400 12px/1.6 'Jost',sans-serif;color:var(--muted);text-align:center;margin-top:12px}


/* ---------- Full-bleed cinematic showcase ---------- */
.showcase{position:relative;min-height:76vh;overflow:hidden;display:flex;align-items:flex-end}
.showcase::before,.showcase::after{content:"";position:absolute;left:0;right:0;height:8px;z-index:2;background:var(--fret)}
.showcase::before{top:0}.showcase::after{bottom:0}
.showcase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1.06)}
.showcase-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,251,244,.05) 0%,rgba(255,251,244,0) 34%,rgba(74,40,20,.42) 62%,rgba(48,24,12,.72) 100%)}
.showcase-cap{position:relative;z-index:3;padding:0 6vw 9vh;max-width:900px}
.showcase-cap .arabic{color:var(--cream2);margin-bottom:12px}
.showcase-cap .eyebrow{color:var(--cream2);letter-spacing:.42em}
.showcase-cap h2{font:400 clamp(34px,5vw,58px)/1.05 'Cormorant Garamond',serif;color:#fff;margin-top:12px;text-shadow:0 2px 24px rgba(60,26,10,.5)}
.showcase-cap h2 em{font-style:italic;color:var(--cream2)}
@media(max-width:820px){.showcase{min-height:60vh}}

/* ---------- Closing CTA ---------- */
.cta{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cta-photo{position:absolute;inset:0}
.cta-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(1.14) saturate(1.06)}
.cta-scrim{position:absolute;inset:0;background:var(--scrim-cta)}
.cta-inner{position:relative;z-index:2;padding:40px 24px}
.cta-inner h2{font:400 clamp(38px,5vw,52px)/1.05 'Cormorant Garamond',serif;color:#fff;text-shadow:0 2px 20px rgba(60,26,10,.5)}
.cta-inner .eyebrow{color:var(--cream2)}
.cta-inner .btn{margin-top:26px}

/* ---------- Footer ---------- */
.foot{background:#fff;padding:56px var(--pad-x) 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto}
.foot h4{font:400 12px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.foot a,.foot p{font:400 13px/1.9 'Jost',sans-serif;color:var(--muted);display:block}
.foot a:hover{color:var(--red)}
.foot .brand{font-size:18px;margin-bottom:12px}
.foot-legal{grid-column:1/-1;margin-top:36px;padding-top:20px;border-top:1px solid rgba(184,134,11,.3);font:400 11px/1.8 'Jost',sans-serif;letter-spacing:.04em;color:var(--muted)}

/* ---------- Section intro ---------- */
.center{text-align:center;max-width:760px;margin:0 auto}
.center .rule-dot{margin:18px auto}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  :root{--pad-x:6vw}
  .nav-links{display:none}
  .n-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:16px 6vw;border-bottom:1px solid rgba(184,134,11,.5);gap:14px}
  .story,.tri,.awards,.amgrid,.wgrid,.foot-grid{grid-template-columns:1fr}
  .story{gap:34px}.tri{gap:34px}
  .story--rev .story-media{order:0}
  .award{border-right:0;border-bottom:1px solid rgba(184,134,11,.35)}
  .award:last-child{border-bottom:0}
  .util{font-size:10px;letter-spacing:.16em}
  .util .util-hide{display:none}
}

/* ---------- Legacy .n-btn (übernommene Sonderseiten) an Cal-Design angleichen ---------- */
.n-btn{display:inline-block;font:400 12px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--red);color:var(--red);background:transparent;cursor:pointer;text-decoration:none;transition:all .2s;border-radius:0}
.n-btn:hover{background:var(--red);color:#fff}
a:has(> .n-btn){text-decoration:none}
/* ---------- Gallery grid ---------- */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.gcell .arch-img{aspect-ratio:4/5}
@media(max-width:820px){.ggrid{grid-template-columns:1fr 1fr;gap:18px}}

/* ---------- Gallery captions, group headings, lightbox ---------- */
.geyebrow{font:600 13px/1 'Jost',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--red);text-align:center;margin:0 0 30px}
.gcell{margin:0}
.gcell .arch-img{aspect-ratio:4/3;cursor:zoom-in}
.gcap{font:400 italic 16px/1.35 'Cormorant Garamond',serif;color:var(--body);text-align:center;margin:14px 4px 0;letter-spacing:.01em}
.lbx{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(28,18,10,.92);cursor:zoom-out}
.lbx.on{display:flex}
.lbx img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}

/* ---------- Gallery film ---------- */
.film-wrap{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 30px 64px -18px rgba(74,40,20,.34);border:1px solid rgba(184,134,11,.28)}
.film-wrap::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(184,134,11,.5);pointer-events:none}
.film{display:block;width:100%;height:auto;background:#1c120a}