/* ===========================================================
   JF AJYAD HOTEL — visual refinement layer
   Loaded last on every page. Adds depth, warmth and polish on
   top of style.css (homepage) and assets/css/site.css (inner
   pages) without changing structure, copy or behaviour.
   =========================================================== */

/* ---------- 1. Shared tokens ---------- */
:root {
  --gold-deep:     #A8823A;
  --gold-bright:   #E8CF90;
  --gold-sheen:    linear-gradient(135deg, #DCC07C 0%, #C9A961 45%, #AE8C44 100%);
  --gold-sheen-hi: linear-gradient(135deg, #F0DCA6 0%, #D4B872 55%, #C09B52 100%);

  --cream-1: #FAF8F3;
  --cream-2: #F3EFE6;
  --cream-3: #EAE4D7;

  --shadow-sm: 0 2px 6px rgba(31, 24, 10, .06), 0 8px 18px -10px rgba(31, 24, 10, .14);
  --shadow-md: 0 4px 12px rgba(31, 24, 10, .07), 0 18px 38px -16px rgba(31, 24, 10, .22);
  --shadow-lg: 0 8px 22px rgba(31, 24, 10, .09), 0 34px 68px -22px rgba(31, 24, 10, .30);
  --shadow-gold: 0 12px 30px -12px rgba(176, 143, 70, .55);

  --ease-soft: cubic-bezier(.22, .68, .35, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Page-wide finish ---------- */
::selection { background: rgba(201, 169, 97, .32); color: inherit; }

html { scrollbar-color: #C9A961 rgba(0, 0, 0, .08); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4B872, #B08F46);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #E8CF90, #C9A961);
  background-clip: padding-box;
}

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }


/* ===========================================================
   3. HOMEPAGE  (html[data-layout="classic"])
   =========================================================== */

/* 3.1 Type — a touch more air and finer tracking */
[data-layout="classic"] .section-title { letter-spacing: .1em; text-wrap: balance; }
[data-layout="classic"] .eyebrow { letter-spacing: .26em; font-size: 12px; opacity: .92; }
[data-layout="classic"] .lede { text-wrap: pretty; }

/* A hairline of gold above each section eyebrow ties the page together. */
[data-layout="classic"] .section-heading-with-icon .section-gold-icon {
  background:
    radial-gradient(circle at 50% 32%, rgba(201, 169, 97, .16), rgba(201, 169, 97, .03) 70%);
  border-color: rgba(201, 169, 97, .62);
  box-shadow:
    0 0 0 6px rgba(201, 169, 97, .07),
    0 10px 24px -14px rgba(120, 95, 40, .55);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[data-layout="classic"] .section:hover .section-gold-icon { transform: translateY(-2px); }

/* 3.2 Divider — give the medallion a soft glow and taper the rules */
[data-layout="classic"] .divider .rule {
  width: 84px; height: 1px; background: none;
  background-image: linear-gradient(90deg, rgba(201, 169, 97, 0), rgba(201, 169, 97, .75));
}
[data-layout="classic"] .divider .rule:last-child {
  background-image: linear-gradient(90deg, rgba(201, 169, 97, .75), rgba(201, 169, 97, 0));
}
[data-layout="classic"] .divider .medallion { filter: drop-shadow(0 2px 6px rgba(176, 143, 70, .35)); }

/* 3.3 Buttons — brushed gold instead of a flat fill */
[data-layout="classic"] .btn {
  border-radius: 999px;
  letter-spacing: .14em;
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft),
              box-shadow .35s var(--ease-out), transform .3s var(--ease-out),
              border-color .25s var(--ease-soft);
}
[data-layout="classic"] .btn-gold {
  background: var(--gold-sheen);
  color: #1C1708;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .34);
}
[data-layout="classic"] .btn-gold:hover,
[data-layout="classic"] .btn-gold:focus-visible {
  background: var(--gold-sheen-hi);
  color: #1C1708;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(176, 143, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-layout="classic"] .btn-gold:active { transform: translateY(0); }
[data-layout="classic"] .btn-outline {
  border-color: rgba(201, 169, 97, .7);
  backdrop-filter: blur(2px);
}
[data-layout="classic"] .btn-outline:hover,
[data-layout="classic"] .btn-outline:focus-visible {
  background: var(--gold-sheen);
  border-color: transparent;
  color: #1C1708;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* 3.4 Hero — a cinematic gradient instead of a flat grey wash,
   plus a very slow drift on the photograph that is on screen. */
[data-layout="classic"] .hero-overlay {
  background:
    radial-gradient(120% 78% at 50% 34%, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .40) 62%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(180deg, rgba(8, 7, 5, .62) 0%, rgba(8, 7, 5, .16) 34%, rgba(8, 7, 5, .30) 66%, rgba(8, 7, 5, .82) 100%);
}
[data-layout="classic"] .hero-slide img {
  transform: scale(1.005);
  transition: transform 9s linear;
  will-change: transform;
}
[data-layout="classic"] .hero-slide.is-active img { transform: scale(1.065); }

[data-layout="classic"] .hero-arrow {
  width: 46px; height: 46px; padding: 11px;
  opacity: .42;
  background: rgba(14, 12, 9, .22);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-layout="classic"] .hero-arrow:hover,
[data-layout="classic"] .hero-arrow:focus-visible {
  opacity: 1;
  color: #F6E6BE;
  background: rgba(14, 12, 9, .5);
  border-color: rgba(201, 169, 97, .75);
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .7);
}

[data-layout="classic"] .hero-logo {
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

[data-layout="classic"] .invite {
  border-radius: 999px;
  border-width: 1px;
  border-color: rgba(201, 169, 97, .55);
  background: rgba(10, 9, 7, .48);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
}
[data-layout="classic"] .invite-dot { box-shadow: 0 0 0 4px rgba(201, 169, 97, .18); }

[data-layout="classic"] .scroll-cue .mouse {
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* 3.5 Booking panel — the first thing under the hero, so it earns depth */
[data-layout="classic"] .booking {
  padding: 26px;
  border-radius: 16px;
  border: 1px solid rgba(201, 169, 97, .28);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-1) 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9);
}
[data-layout="classic"] .booking-field label { letter-spacing: .18em; color: #8A7A5C; }
[data-layout="classic"] .booking-field input,
[data-layout="classic"] .booking-field select {
  border-radius: 10px;
  border-color: rgba(176, 143, 70, .28);
  background: #FFFDF9;
  transition: border-color .2s var(--ease-soft), box-shadow .25s var(--ease-soft), background .2s var(--ease-soft);
}
[data-layout="classic"] .booking-field input:hover,
[data-layout="classic"] .booking-field select:hover { border-color: rgba(176, 143, 70, .5); }
[data-layout="classic"] .booking-field input:focus,
[data-layout="classic"] .booking-field select:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .2);
}
/* Every control the same height so the row of labels sits on one line. */
[data-layout="classic"] .booking-field input,
[data-layout="classic"] .booking-field select { height: 50px; min-height: 50px; padding-block: 0; }
[data-layout="classic"] .booking-submit {
  letter-spacing: .2em;
  min-height: 54px;
  border-radius: 12px;
  margin-top: 4px;
}

/* 3.6 Section rhythm — warm, alternating grounds instead of flat white */
[data-layout="classic"] .welcome {
  background:
    radial-gradient(74% 120% at 50% -18%, rgba(201, 169, 97, .1) 0%, rgba(201, 169, 97, 0) 62%),
    var(--cream-1);
}
[data-layout="classic"] .rooms {
  background:
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream-1) 100%);
}
[data-layout="classic"] .social { background: var(--cream-1); }
[data-layout="classic"] .location {
  background:
    radial-gradient(64% 100% at 82% 0%, rgba(201, 169, 97, .12) 0%, rgba(201, 169, 97, 0) 64%),
    var(--cream-2);
}

/* 3.7 Room cards — lift, zoom and a gold seam on hover */
[data-layout="classic"] .room-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(176, 143, 70, .16);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
[data-layout="classic"] .room-card::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 3px; border-radius: 14px 14px 0 0;
  background: var(--gold-sheen);
  opacity: 0; transition: opacity .4s var(--ease-out);
  z-index: 4; pointer-events: none;
}
[data-layout="classic"] .room-card:hover,
[data-layout="classic"] .room-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(176, 143, 70, .38);
  box-shadow: var(--shadow-lg);
}
[data-layout="classic"] .room-card:hover::after,
[data-layout="classic"] .room-card:focus-within::after { opacity: 1; }

[data-layout="classic"] .room-card .slides .slide img {
  transition: transform .9s var(--ease-out);
}
[data-layout="classic"] .room-card:hover .slides .slide.is-active img { transform: scale(1.05); }

[data-layout="classic"] .room-name { letter-spacing: .04em; }
[data-layout="classic"] .room-amenities svg { stroke-width: 1.7; }

/* The round arrows on the card photographs read better as glass. */
[data-layout="classic"] .room-card .slide-btn {
  background: rgba(20, 17, 12, .3);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease-soft), background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
[data-layout="classic"] .room-card:hover .slide-btn,
[data-layout="classic"] .room-card:focus-within .slide-btn { opacity: 1; }
[data-layout="classic"] .room-card .slide-btn:hover {
  background: rgba(20, 17, 12, .62);
  border-color: rgba(201, 169, 97, .8);
  color: #F6E6BE;
}
@media (hover: none) {
  [data-layout="classic"] .room-card .slide-btn { opacity: 1; }
}

/* 3.8 "Hotel at a glance" tiles — a gradient scrim keeps the
   photographs bright while the titles stay readable. */
[data-layout="classic"] .tile::after {
  background: linear-gradient(180deg,
    rgba(10, 9, 7, .06) 0%,
    rgba(10, 9, 7, .10) 42%,
    rgba(10, 9, 7, .58) 78%,
    rgba(10, 9, 7, .84) 100%);
}
[data-layout="classic"] .tile:hover::after,
[data-layout="classic"] .tile:focus-visible::after {
  background: linear-gradient(180deg,
    rgba(10, 9, 7, .16) 0%,
    rgba(10, 9, 7, .26) 42%,
    rgba(10, 9, 7, .68) 78%,
    rgba(10, 9, 7, .9) 100%);
}
[data-layout="classic"] .tile::before {
  content: "";
  position: absolute; inset: 14px; z-index: 3;
  border: 1px solid rgba(255, 255, 255, .18);
  opacity: 0;
  transition: opacity .4s var(--ease-out), inset .4s var(--ease-out);
  pointer-events: none;
}
[data-layout="classic"] .tile:hover::before,
[data-layout="classic"] .tile:focus-visible::before { opacity: 1; }
[data-layout="classic"] .tile-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
  letter-spacing: .16em;
}
[data-layout="classic"] .tile-dot {
  box-shadow: 0 0 0 4px rgba(201, 169, 97, .2);
  transition: transform .4s var(--ease-out);
}
[data-layout="classic"] .tile:hover .tile-dot { transform: rotate(135deg) scale(1.15); }

/* 3.9 Social */
[data-layout="classic"] .social-icons a {
  border-color: rgba(201, 169, 97, .75);
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft),
              transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s var(--ease-soft);
}
[data-layout="classic"] .social-icons a:hover {
  background: var(--gold-sheen);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}
[data-layout="classic"] .social-grid { gap: 14px; }
[data-layout="classic"] .social-grid a {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
[data-layout="classic"] .social-grid a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
[data-layout="classic"] .ig-badge {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* 3.10 Location */
[data-layout="classic"] .location-map {
  border-radius: 16px;
  border: 1px solid rgba(176, 143, 70, .26);
  box-shadow: var(--shadow-md);
}
[data-layout="classic"] .location-codes dd { letter-spacing: .02em; }
[data-layout="classic"] .location-info .btn-gold { margin-top: 4px; }

/* 3.11 Footer */
[data-layout="classic"] .site-footer {
  position: relative;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 169, 97, .09) 0%, rgba(201, 169, 97, 0) 62%),
    #0A0A0A;
}
[data-layout="classic"] .site-footer::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 169, 97, 0) 0%, rgba(201, 169, 97, .65) 50%, rgba(201, 169, 97, 0) 100%);
}
[data-layout="classic"] .footer-logo { filter: drop-shadow(0 4px 18px rgba(201, 169, 97, .22)); }
[data-layout="classic"] .footer-links a { transition: color .2s var(--ease-soft), padding-inline-start .25s var(--ease-out); }
[data-layout="classic"] .footer-social a {
  border-color: rgba(201, 169, 97, .5);
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft), transform .3s var(--ease-out);
}
[data-layout="classic"] .footer-social a:hover { background: var(--gold-sheen); border-color: transparent; transform: translateY(-3px); }

/* 3.12 Floating buttons */
.wa-fab, .chat-fab {
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.wa-fab:hover, .chat-fab:hover, .wa-float:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .5);
}
.chat-fab { background: var(--gold-sheen); }
.wa-fab::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: wa-ring 2.8s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes wa-ring {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* 3.13 Reveal — a gentler, more confident entrance */
[data-layout="classic"] .reveal {
  transform: translateY(20px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}


/* 3.14 Homepage in night mode — contrast the base sheet never covered */
[data-theme="dark"][data-layout="classic"] .btn-outline {
  color: #F3E7CC;
  border-color: rgba(201, 169, 97, .62);
}
[data-theme="dark"][data-layout="classic"] .btn-outline:hover,
[data-theme="dark"][data-layout="classic"] .btn-outline:focus-visible { color: #1C1708; }

[data-theme="dark"][data-layout="classic"] .location-codes dd,
[data-theme="dark"][data-layout="classic"] .location-address { color: #EFE9DC; }
[data-theme="dark"][data-layout="classic"] .location-map {
  background: #171614;
  border-color: rgba(201, 169, 97, .32);
}
[data-theme="dark"][data-layout="classic"] .location-map-fallback { color: #9E978A; }

[data-theme="dark"][data-layout="classic"] .room-card { border-color: rgba(201, 169, 97, .2); }
[data-theme="dark"][data-layout="classic"] .room-card:hover { border-color: rgba(201, 169, 97, .42); }
[data-theme="dark"][data-layout="classic"] .slides,
[data-theme="dark"][data-layout="classic"] .tile { background: #1A1A1A; }

[data-theme="dark"][data-layout="classic"] .social-icons a { border-color: rgba(201, 169, 97, .62); }
[data-theme="dark"][data-layout="classic"] .search-note { color: #9E978A; }

/* The white booking panel needs a warm rim so it does not float
   as a bare rectangle against the night background. */
[data-theme="dark"][data-layout="classic"] .booking {
  border-color: rgba(201, 169, 97, .42);
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(201, 169, 97, .1);
}


/* ===========================================================
   4. INNER PAGES  (html[data-layout="modern"])
   Brings the rooms / gallery / location / contact pages into
   the same serif-and-gold register as the homepage.
   =========================================================== */

[data-layout="modern"] {
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
}

/* 4.1 Headings in the brand serif */
[data-layout="modern"] h1,
[data-layout="modern"] h2,
[data-layout="modern"] .h-lg,
[data-layout="modern"] .h-md,
[data-layout="modern"] .h-sm,
[data-layout="modern"] .cta-band h2,
[data-layout="modern"] .room-row h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.16;
  text-wrap: balance;
}
[data-layout="modern"] .h-lg { letter-spacing: .015em; }
[data-layout="modern"] .kicker { letter-spacing: .28em; }
[data-layout="modern"] .lede { font-size: 1.05rem; line-height: 1.8; text-wrap: pretty; }

/* 4.2 A warmer ground than flat charcoal / flat grey */
[data-layout="modern"]:not([data-theme="light"]) body {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(201, 162, 74, .07) 0%, rgba(201, 162, 74, 0) 60%),
    #0B0B0C;
}
[data-layout="modern"][data-theme="light"] body {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(201, 162, 74, .12) 0%, rgba(201, 162, 74, 0) 58%),
    var(--cream-1);
}

/* Hairlines: one crisp line reads better than a 2px slab. */
[data-layout="modern"] .section { border-bottom-width: 1px; border-bottom-color: rgba(201, 162, 74, .2); }
[data-layout="modern"] .rows,
[data-layout="modern"] .rows li,
[data-layout="modern"] .faq,
[data-layout="modern"] .faq > div,
[data-layout="modern"] .footer-nav,
[data-layout="modern"] .footer-nav a,
[data-layout="modern"] .footer-operator,
[data-layout="modern"] .footer-bottom {
  border-width: 1px;
}
[data-layout="modern"]:not([data-theme="light"]) .rows,
[data-layout="modern"]:not([data-theme="light"]) .rows li,
[data-layout="modern"]:not([data-theme="light"]) .faq,
[data-layout="modern"]:not([data-theme="light"]) .faq > div,
[data-layout="modern"]:not([data-theme="light"]) .footer-nav,
[data-layout="modern"]:not([data-theme="light"]) .footer-nav a,
[data-layout="modern"]:not([data-theme="light"]) .footer-operator,
[data-layout="modern"]:not([data-theme="light"]) .footer-bottom { border-color: rgba(201, 162, 74, .18); }

/* 4.3 Header */
[data-layout="modern"] .site-header { border-bottom-width: 1px; border-bottom-color: rgba(201, 162, 74, .26); }
[data-layout="modern"] .brand img { height: 64px; transition: transform .35s var(--ease-out); }
[data-layout="modern"] .brand:hover img { transform: scale(1.04); }
[data-layout="modern"][data-theme="light"] .brand img { filter: drop-shadow(0 1px 2px rgba(120, 92, 32, .3)); }
[data-layout="modern"] .nav a.nav-link { border-bottom-width: 1px; }
[data-layout="modern"] .lang-btn {
  border-width: 1px;
  border-radius: 999px;
  border-color: rgba(201, 162, 74, .5);
}
[data-layout="modern"] .lang-btn:hover { background: rgba(201, 162, 74, .12); }
[data-layout="modern"] .nav-toggle { border-width: 1px; border-radius: 8px; border-color: rgba(201, 162, 74, .5); }

/* The base sheet paints the nav for the mobile drawer; on desktop that
   leaves a visible slab floating in the header bar. */
@media (min-width: 901px) {
  html[data-layout="modern"] .nav,
  html[data-theme="light"][data-layout="modern"] .nav { background: transparent; }
}

/* Day/night control: a gold-ringed disc, matching the homepage. */
[data-layout="modern"] .appearance-controls { gap: 10px; }
[data-layout="modern"] .theme-toggle {
  width: 40px; height: 40px;
  border: 2px solid #C9A24A;
  color: #A8823A;
  font-size: 19px;
  opacity: 1;
  background: rgba(201, 162, 74, .1);
  box-shadow: 0 0 0 2px rgba(201, 162, 74, .14);
}
[data-layout="modern"]:not([data-theme="light"]) .theme-toggle {
  color: #E8CF90;
  background: rgba(0, 0, 0, .34);
  box-shadow: 0 0 0 2px rgba(201, 162, 74, .18), 0 0 18px rgba(201, 162, 74, .3);
}
[data-layout="modern"] .theme-toggle:hover { background: var(--gold-sheen); color: #17140C; }

/* 4.4 Buttons — same brushed gold as the homepage */
[data-layout="modern"] .btn {
  border-radius: 999px;
  border-width: 1px;
  background: var(--gold-sheen);
  border-color: transparent;
  color: #1C1708;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background .25s var(--ease-soft), transform .3s var(--ease-out),
              box-shadow .35s var(--ease-out), color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
[data-layout="modern"] .btn:hover,
[data-layout="modern"] .btn:focus-visible {
  background: var(--gold-sheen-hi);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(176, 143, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .42);
}
[data-layout="modern"] .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .34);
  color: #FFF;
  box-shadow: none;
}
[data-layout="modern"] .btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(201, 162, 74, .1); }
[data-layout="modern"] .btn-ink {
  background: #101012;
  border-color: #101012;
  color: var(--gold-bright);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6);
}
[data-layout="modern"] .btn-ink:hover { background: #1B1B1E; border-color: #1B1B1E; color: #F3E2B6; }

/* 4.5 Photographs — let the hotel's own colour show */
[data-layout="modern"] .hero-img { filter: grayscale(0%) brightness(.5) saturate(1.05); }
[data-layout="modern"] .split img,
[data-layout="modern"] .strip img,
[data-layout="modern"] .photo-grid img,
[data-layout="modern"] .room-card .frame img,
[data-layout="modern"] .room-row .frame img { filter: none; }

[data-layout="modern"] .split img { border-radius: 14px; box-shadow: var(--shadow-md); }

/* 4.6 Room rows — framed like plates rather than boxed off */
[data-layout="modern"] .room-row .frame {
  border-width: 1px;
  border-color: rgba(201, 162, 74, .28);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
[data-layout="modern"] .room-row .frame img { transition: transform .9s var(--ease-out); }
[data-layout="modern"] .room-row .frame:hover { border-color: rgba(201, 162, 74, .55); box-shadow: var(--shadow-lg); }
[data-layout="modern"] .room-row .frame:hover img { transform: scale(1.04); }
[data-layout="modern"] .awaiting { border-width: 1px; border-radius: 10px; border-color: rgba(201, 162, 74, .35); }

[data-layout="modern"] .rows li { transition: color .2s var(--ease-soft), padding-inline-start .25s var(--ease-out); }
[data-layout="modern"] .rows li:hover { padding-inline-start: 6px; }

/* 4.7 Room / contact cards */
[data-layout="modern"] .grid-tiles,
[data-layout="modern"] .contact-cards { gap: 18px; background: transparent; }
[data-layout="modern"] .room-card,
[data-layout="modern"] .contact-cards > div {
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 74, .22);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
[data-layout="modern"] .room-card:hover,
[data-layout="modern"] .contact-cards > div:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 74, .48);
  box-shadow: var(--shadow-lg);
}
[data-layout="modern"]:not([data-theme="light"]) .room-card,
[data-layout="modern"]:not([data-theme="light"]) .contact-cards > div {
  background: linear-gradient(180deg, #151517 0%, #101012 100%);
}
[data-layout="modern"][data-theme="light"] .room-card,
[data-layout="modern"][data-theme="light"] .contact-cards > div {
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* 4.8 Gallery — readable captions in both themes, softer grid */
[data-layout="modern"] .photo-grid { gap: 16px; background: transparent; }
[data-layout="modern"] .photo-grid figure {
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 74, .2);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
[data-layout="modern"] .photo-grid figure:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 74, .48);
  box-shadow: var(--shadow-lg);
}
[data-layout="modern"] .photo-grid figcaption {
  color: #FFFFFF;
  letter-spacing: .2em;
  padding: 52px 22px 18px;
  background: linear-gradient(180deg, rgba(8, 7, 5, 0) 0%, rgba(8, 7, 5, .55) 45%, rgba(8, 7, 5, .92) 100%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
/* Three across on desktop: the photographs are portrait, and a
   three-up grid shows more of the hotel without scrolling. */
@media (min-width: 901px) {
  [data-layout="modern"] .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-layout="modern"] .photo-grid img { height: 360px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  [data-layout="modern"] .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layout="modern"] .photo-grid img { height: 300px; }
}

[data-layout="modern"] .strip { gap: 16px; background: transparent; }
[data-layout="modern"] .strip img { border-radius: 14px; box-shadow: var(--shadow-sm); }

/* 4.9 Gold call-to-action band */
[data-layout="modern"] .cta-band {
  position: relative;
  background: linear-gradient(135deg, #E0C27E 0%, #C9A24A 46%, #AC873A 100%);
  overflow: hidden;
}
[data-layout="modern"] .cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 140% at 12% 0%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
[data-layout="modern"] .cta-band > .wrap { position: relative; z-index: 1; }
[data-layout="modern"] .cta-band h2 { color: #17140C; }
[data-layout="modern"] .cta-band p { color: rgba(23, 20, 12, .8); }

/* 4.10 Map */
[data-layout="modern"] .map-frame {
  border-width: 1px;
  border-color: rgba(201, 162, 74, .3);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
[data-layout="modern"]:not([data-theme="light"]) .map-frame iframe { filter: grayscale(16%) invert(92%) hue-rotate(180deg) contrast(.92); }
[data-layout="modern"][data-theme="light"] .map-frame iframe { filter: none; }

/* 4.11 Footer */
[data-layout="modern"] .site-footer {
  position: relative;
  border-top: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 162, 74, .1) 0%, rgba(201, 162, 74, 0) 60%),
    #0B0B0C;
}
[data-layout="modern"] .site-footer::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 74, 0) 0%, rgba(201, 162, 74, .85) 50%, rgba(201, 162, 74, 0) 100%);
}
[data-layout="modern"] .footer-top .footer-mark img { filter: drop-shadow(0 6px 22px rgba(201, 162, 74, .2)); }
[data-layout="modern"] .footer-nav a { transition: color .2s var(--ease-soft), padding-inline-start .25s var(--ease-out); }
[data-layout="modern"] .footer-nav a:hover { padding-inline-start: 6px; }

/* 4.12 Floating WhatsApp */
[data-layout="modern"] .wa-float {
  border-radius: 50%;
  border-color: transparent;
  background: var(--gold-sheen);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .55);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s var(--ease-soft);
}
[data-layout="modern"] .wa-float:hover { background: var(--gold-sheen-hi); }

/* 4.13 Light theme gaps left by the base sheet.
   The base sheet's muted text tokens are white-on-dark; in day mode
   they left secondary copy invisible on the cream ground. Flip the
   tokens for the page, then hand the original values back to the
   areas that stay dark whatever the theme. */
[data-layout="modern"][data-theme="light"] {
  --text-70: rgba(38, 37, 31, .78);
  --text-60: rgba(38, 37, 31, .62);
  --text-45: rgba(38, 37, 31, .5);
}
[data-layout="modern"][data-theme="light"] .site-footer,
[data-layout="modern"][data-theme="light"] .lightbox,
[data-layout="modern"][data-theme="light"] .hero {
  --text-70: rgba(255, 255, 255, .74);
  --text-60: rgba(255, 255, 255, .6);
  --text-45: rgba(255, 255, 255, .45);
}

/* 4.13 Light theme gaps left by the base sheet */
[data-layout="modern"][data-theme="light"] .kicker,
[data-layout="modern"][data-theme="light"] .contact-cards .label,
[data-layout="modern"][data-theme="light"] .capacity { color: var(--gold-deep); }
[data-layout="modern"][data-theme="light"] .rows li span:last-child,
[data-layout="modern"][data-theme="light"] .footer-operator strong { color: var(--gold-deep); }
[data-layout="modern"][data-theme="light"] .contact-cards .note,
[data-layout="modern"][data-theme="light"] .faq p { color: #55524A; }
[data-layout="modern"][data-theme="light"] .awaiting { background: var(--cream-2); }
[data-layout="modern"][data-theme="light"] .awaiting p { color: var(--gold-deep); }
[data-layout="modern"][data-theme="light"] .room-row .frame { background: var(--cream-2); }
[data-layout="modern"][data-theme="light"] .photo-grid figure,
[data-layout="modern"][data-theme="light"] .map-frame { background: var(--cream-2); }
[data-layout="modern"][data-theme="light"] .btn-ghost { color: #26251F; border-color: rgba(38, 37, 31, .3); }
[data-layout="modern"][data-theme="light"] ::selection { background: rgba(168, 130, 58, .28); }


/* ===========================================================
   5. MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-layout="classic"] .hero-slide img,
  [data-layout="classic"] .hero-slide.is-active img { transform: none; transition: none; }
  .wa-fab::after { animation: none; display: none; }
}