/* =========================================================================
   Alf Leila Boutique Hotel — deferred stylesheet.
   Everything below the fold. The header + hero live in the critical CSS
   inlined in index.html; the variables are defined there too.
   ========================================================================= */

@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---- shared section chrome ---------------------------------------------- */
.section{padding-block:5.5rem}
@media (max-width:719px){.section{padding-block:3.75rem}}

.section-head{max-width:64ch;margin-inline:auto;text-align:center;margin-block-end:3rem}
.eyebrow{color:var(--gold-800);font-size:.8rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin-block-end:.6rem}
html.lang-ar .eyebrow{letter-spacing:.06em}
.eyebrow--light{color:var(--gold-300)}
.section-title{font-size:clamp(1.7rem,4vw,2.6rem);color:var(--clay-800)}
.section--night .section-title{color:var(--cream-50)}
.section-lede{color:var(--ink-soft);max-width:56ch;margin:1rem auto 0}
.section--night .section-lede{color:var(--blue-300)}

/* Geometric divider: a small eight-point star between two fading rules.
   The star is a real child (<b class="star8">) because both pseudo-elements
   are the rules. Direction-neutral: the gradients fade toward the star. */
.divider{display:flex;align-items:center;gap:.9rem;
  margin:1.6rem auto 0;width:min(280px,60%)}
.divider::before,.divider::after{content:"";flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-500))}
.divider::after{background:linear-gradient(to left,transparent,var(--gold-500))}
.divider .star8{flex:0 0 auto;width:13px;height:13px;background:var(--gold-500);
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.divider--light::before,.divider--light::after{opacity:.7}

/* ---- rooms grid ---------------------------------------------------------- */
.rooms{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rooms__fallback{text-align:center;color:var(--ink-soft);grid-column:1/-1}

.room{background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(43,29,20,.06),0 14px 40px -18px rgba(43,29,20,.25);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.room:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(43,29,20,.07),0 22px 52px -20px rgba(43,29,20,.35)}

.room__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--clay-100)}
.room__media picture{display:block;width:100%;height:100%}
.room__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.room:hover .room__media img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .room,.room__media img{transition:none}
  .room:hover{transform:none}
  .room:hover .room__media img{transform:none}
}
/* arched top edge on the photo, echoing the emblem */
.room__media::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:22px;
  background:var(--white);
  clip-path:polygon(0 100%,100% 100%,100% 40%,50% 0,0 40%)}
.room__flag{position:absolute;inset-block-start:.9rem;inset-inline-start:.9rem;
  background:var(--gold-500);color:var(--blue-900);font-size:.72rem;font-weight:700;
  padding:.28rem .7rem;border-radius:999px;letter-spacing:.04em}

.room__body{padding:1.1rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.room__name{font-size:1.35rem;color:var(--clay-800)}
html.lang-ar .room__name{font-family:var(--display);font-size:1.5rem}
.room__tagline{color:var(--gold-800);font-size:.86rem;font-weight:700;margin:.15rem 0 .7rem}
.room__text{color:var(--ink-soft);font-size:.94rem;margin-block-end:.9rem}
.room__meta{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem .5rem;padding:0;margin:0 0 .8rem}
.room__meta li{font-size:.78rem;font-weight:700;color:var(--blue-800);
  background:var(--cream-100);border:1px solid var(--clay-100);border-radius:999px;padding:.24rem .7rem}
.room__features{list-style:none;padding:0;margin:0 0 1.1rem;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.room__features li{font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:.35rem}
.room__features li::before{content:"";width:5px;height:5px;background:var(--gold-500);
  transform:rotate(45deg);flex:0 0 auto}
.room__cta{margin-block-start:auto}
.room__cta .btn{width:100%}

/* ---- featured room (cinematic full-bleed) -------------------------------- */
.featured{position:relative;min-height:82svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--clay-900);isolation:isolate;color:var(--white)}
.featured__media{position:absolute;inset-block:-7%;inset-inline:0;height:114%;z-index:-2;will-change:transform}
.featured__media picture{display:block;width:100%;height:100%}
.featured__media img{width:100%;height:100%;object-fit:cover}
.featured__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(43,24,15,.85) 0%,rgba(43,24,15,.35) 55%,rgba(43,24,15,.15))}
.featured__body{padding-block:4.5rem 5rem;text-align:start;max-width:600px;margin-inline-start:calc((100% - var(--shell))/2)}
@media (max-width:1219px){.featured__body{margin-inline:auto}}
.featured__ornament{width:56px;height:56px;color:var(--gold-300);margin-block-end:1rem}
.featured__title{font-size:clamp(1.9rem,4.5vw,3rem);color:var(--gold-100)}
html.lang-ar .featured__title{font-family:var(--display)}
.featured__text{color:rgba(250,245,235,.88);max-width:52ch;margin-block:1rem 1.6rem;
  font-size:1.02rem}
.featured__cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- courtyard mosaic ----------------------------------------------------- */
.mosaic{display:grid;gap:1.1rem;grid-template-columns:repeat(6,1fr);margin-block-end:3.2rem}
.mosaic__item{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--clay-100);grid-column:span 3}
.mosaic__item--wide{grid-column:span 6}
.mosaic__item--sq{grid-column:span 2}
@media (min-width:1000px){
  .mosaic__item{grid-column:span 2}
  .mosaic__item--wide{grid-column:span 4;grid-row:span 1}
  .mosaic__item--sq{grid-column:span 2}
}
@media (max-width:639px){
  .mosaic{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .mosaic__item,.mosaic__item--wide{grid-column:span 2}
  .mosaic__item--sq{grid-column:span 1}
}
.mosaic__item picture{display:block;width:100%;height:100%}
.mosaic__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .8s var(--ease)}
.mosaic__item--sq img{aspect-ratio:1}
.mosaic__item:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .mosaic__item img{transition:none}
  .mosaic__item:hover img{transform:none}
}
.mosaic__item figcaption{position:absolute;inset-inline:0;inset-block-end:0;
  padding:1.6rem .9rem .6rem;color:var(--cream-50);font-size:.82rem;font-weight:700;
  background:linear-gradient(to top,rgba(43,29,20,.72),transparent)}

/* ---- amenities ------------------------------------------------------------ */
.amenities{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.amenity{background:var(--white);border-radius:var(--radius);padding:1.4rem 1.3rem;
  border-block-start:3px solid var(--gold-500);
  box-shadow:0 1px 2px rgba(43,29,20,.05),0 10px 30px -18px rgba(43,29,20,.2)}
.amenity__icon{display:inline-flex;width:44px;height:44px;border-radius:12px;
  background:var(--cream-100);color:var(--clay-500);align-items:center;justify-content:center;
  margin-block-end:.7rem}
.amenity__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.amenity h3{font-size:1.05rem;color:var(--clay-800);margin-block-end:.35rem}
html.lang-ar .amenity h3{font-family:var(--display);font-size:1.2rem}
.amenity p{color:var(--ink-soft);font-size:.9rem;margin:0}

/* ---- location ------------------------------------------------------------- */
.section--night{background:
  radial-gradient(140% 100% at 50% 0%,var(--blue-800),var(--blue-900) 70%);
  color:var(--cream-50)}
.location{display:grid;gap:2rem;grid-template-columns:1.2fr .8fr;align-items:start}
@media (max-width:899px){.location{grid-template-columns:1fr}}

.map{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--blue-800);
  aspect-ratio:4/3;border:1px solid rgba(222,189,92,.25)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:.4rem}
.map__ornament{width:52px;height:52px;color:var(--gold-300);opacity:.9}
.map__note{color:var(--blue-300);font-size:.88rem;max-width:38ch}

.location__photo{margin:0 0 1.4rem;border-radius:var(--radius);overflow:hidden}
.location__photo img{width:100%;height:auto;object-fit:cover}
.facts{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.1rem}
.facts li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem .2rem;border-block-end:1px dashed rgba(222,189,92,.25)}
.facts__k{color:var(--gold-300);font-size:.86rem;font-weight:700;flex:0 0 auto}
.facts__v{color:var(--cream-100);font-size:.92rem;text-align:end}
.section--night .btn--ghost{color:var(--gold-100)}

/* ---- contact --------------------------------------------------------------- */
.contact{display:grid;gap:2.4rem;grid-template-columns:.9fr 1.1fr;align-items:start}
@media (max-width:899px){.contact{grid-template-columns:1fr}}

.channel{display:flex;align-items:center;gap:1rem;background:var(--white);
  border-radius:var(--radius);padding:1.1rem 1.25rem;margin-block-end:1rem;
  box-shadow:0 1px 2px rgba(43,29,20,.05),0 10px 30px -18px rgba(43,29,20,.2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.channel:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(43,29,20,.06),0 16px 40px -18px rgba(43,29,20,.3)}
.channel__icon{display:inline-flex;width:48px;height:48px;border-radius:14px;flex:0 0 auto;
  background:var(--cream-100);color:var(--clay-500);align-items:center;justify-content:center}
.channel__icon svg{width:26px;height:26px;fill:currentColor}
.channel__body{display:flex;flex-direction:column;line-height:1.4}
.channel__body strong{color:var(--clay-800)}
.channel__meta{color:var(--ink-soft);font-size:.9rem}
.contact__hint{color:var(--ink-soft);font-size:.88rem;padding-inline:.3rem}

.enquiry{background:var(--white);border-radius:var(--radius);padding:1.8rem 1.6rem;
  box-shadow:0 1px 2px rgba(43,29,20,.05),0 14px 44px -20px rgba(43,29,20,.28);
  display:grid;gap:1rem;grid-template-columns:1fr 1fr;
  border-block-start:3px solid var(--gold-500)}
.enquiry__title{grid-column:1/-1;color:var(--clay-800);font-size:1.3rem}
html.lang-ar .enquiry__title{font-family:var(--display);font-size:1.45rem}
.field{grid-column:1/-1;display:flex;flex-direction:column;gap:.35rem}
.field--half{grid-column:span 1}
@media (max-width:519px){.field--half{grid-column:1/-1}}
.field label{font-size:.86rem;font-weight:700;color:var(--clay-700)}
.field__fmt{font-weight:400;color:var(--ink-soft);font-size:.8em}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--cream-50);
  border:1px solid var(--clay-100);border-radius:10px;padding:.65rem .8rem;
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.field textarea{resize:vertical;min-height:80px}

/* Chrome + Arabic UI renders the empty date input's placeholder text with
   broken shaping; hide the internal text until a value exists. The wrapper
   gets .is-empty from main.js (no :placeholder-shown for type=date). */
.date{position:relative}
.date input{width:100%}
html.lang-ar .date.is-empty input{color:transparent}
html.lang-ar .date.is-empty input:focus{color:var(--ink)}

.enquiry__note{grid-column:1/-1;color:var(--ink-soft);font-size:.8rem;margin:0}
.enquiry__submit{grid-column:1/-1;justify-self:start}
@media (max-width:519px){.enquiry__submit{width:100%}}

/* ---- footer ----------------------------------------------------------------- */
.footer{background:var(--blue-900);color:var(--cream-100);padding-block:3rem 2rem;
  border-block-start:3px solid var(--gold-500)}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.footer__brand{display:flex;align-items:center;gap:.7rem;color:var(--gold-300)}
.footer__brand .mark{width:44px;height:44px}
.footer__name{font-weight:700;font-size:1.1rem}
html.lang-ar .footer__name{font-family:var(--display);font-size:1.3rem}
.footer__addr{color:var(--blue-300);font-size:.9rem;margin:0}
.footer__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center}
.footer__nav a{font-size:.86rem;opacity:.85;transition:opacity .2s}
.footer__nav a:hover{opacity:1}
.footer__demo{margin:1rem 0 0;font-size:.78rem;color:var(--blue-300);opacity:.8;
  border:1px dashed rgba(222,189,92,.35);border-radius:999px;padding:.3rem 1rem}

/* ---- reveal animation -------------------------------------------------------- */
[data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
/* stagger cards inside grids a touch */
.rooms .room:nth-child(2){transition-delay:.06s}
.rooms .room:nth-child(3){transition-delay:.12s}
.mosaic .mosaic__item:nth-child(2){transition-delay:.06s}
.mosaic .mosaic__item:nth-child(3){transition-delay:.12s}