/* Maje Hotels — temporary group cover page
   Owner revision 2: light theme, EN/TR switcher, elevated hotel cards, company contact in the footer.
   Palette from the supplied wordmark: black, ivory #F6F1E8, gold #9B7F54. */

:root {
  --paper: oklch(0.985 0.005 85);         /* page surface */
  --card: oklch(0.997 0.002 85);          /* raised card surface */
  --ivory: oklch(0.96 0.014 84);          /* ≈ #F6F1E8, ground behind photos while loading */
  --ink: oklch(0.17 0.005 75);            /* type */
  --ink-hover: oklch(0.3 0.008 75);       /* solid button hover */
  --muted: oklch(0.45 0.01 75);           /* secondary type */
  --gold: oklch(0.62 0.065 75);           /* ≈ #9B7F54, rules and accents only */
  --gold-deep: oklch(0.48 0.06 72);       /* small gold type */
  --rule: oklch(0.17 0.005 75 / 0.12);

  --radius: 6px;
  --shadow-tint: 0.5 0.035 70;            /* warm taupe, softer than ink for elevation */
  --shadow: 0 1px 2px oklch(var(--shadow-tint) / 0.06), 0 10px 24px -12px oklch(var(--shadow-tint) / 0.16);
  --shadow-up: 0 2px 6px oklch(var(--shadow-tint) / 0.07), 0 24px 48px -20px oklch(var(--shadow-tint) / 0.22);

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --pad: clamp(20px, 4vw, 64px);
  --caption-h: 226px;
  --body-w: clamp(270px, 22vw, 330px);
}
@media (min-width: 1280px) { :root { --caption-h: 206px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 50;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Page frame: masthead and hotels fill the first viewport; the footer sits below it ---------- */

.fold { min-height: 100svh; }
@media (min-width: 1180px) {
  .fold {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100svh; min-height: 700px;
  }
  .fold .hotels { padding-bottom: clamp(24px, 4vh, 40px); }
}

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  display: grid; justify-items: center;
  padding: clamp(22px, 3.4vh, 38px) var(--pad) clamp(14px, 2.2vh, 24px);
}
/* Sized so the thin gold "HOTELS" line renders at about 13 px cap height on desktop */
.masthead__logo img { width: clamp(280px, 25vw, 360px); height: auto; }

/* Language switcher: quiet text toggle in the top-right corner of the masthead */
.lang {
  position: absolute; top: clamp(14px, 2.4vh, 26px); right: var(--pad);
  display: flex; align-items: center;
}
.lang__btn {
  position: relative;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  font: 600 12px/1 var(--font-body); letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.2s;
}
.lang__btn::after {
  content: ""; position: absolute; left: 50%; bottom: 9px;
  width: 18px; height: 2px; margin-left: -10px;   /* centred under the tracked letters */
  background: var(--gold);
  transform: scaleX(0); transition: transform 0.3s var(--ease-out);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed="true"] { color: var(--ink); cursor: default; }
.lang__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.lang__sep { width: 1px; height: 14px; background: var(--rule); }
html:not(.js) .lang { display: none; }

/* ---------- Hotel selector ---------- */

.hotels {
  display: grid; grid-template-rows: auto 1fr; gap: 16px;
  min-height: 0;
  padding: 0 var(--pad);
}
.hotels__bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.hotels__title {
  font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep);
}
.hotels__dot { padding: 0 0.6em; }
.hotels__places { white-space: nowrap; }
.hotels__hint {
  font: 500 11px/1.5 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.hotels__hint .hint-touch { display: none; }
@media (hover: none), (max-width: 1179px) {
  .hotels__hint .hint-pointer { display: none; }
  .hotels__hint .hint-touch { display: inline; }
}
html:not(.js) .hotels__hint { visibility: hidden; }

.hotels__list { display: flex; gap: 14px; min-height: 400px; padding-bottom: 6px; }

/* Each hotel is one raised object: photo and caption on a single card */
.hotel {
  --px: 0px; --py: 0px;
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) var(--caption-h);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: 2px solid transparent; outline-offset: 4px;
  transition: flex-grow 0.95s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.js .hotel.is-active { flex-grow: 2.7; }
.hotel:hover, .hotel:focus-within, .js .hotel.is-active {
  transform: translateY(-4px);
  box-shadow: var(--shadow-up);
}
.hotel:has(.hotel__toggle:focus-visible) { outline-color: var(--ink); }

/* Photos stay at full luminosity: type sits on the card, never on the photo */
.hotel__media {
  position: relative; overflow: hidden;
  margin: 8px 8px 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--ivory);
}
.hotel__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                       /* intentional editorial crop of a croppable scene */
  object-position: var(--pos, 50% 50%);
  transform: translate3d(var(--px), var(--py), 0) scale(1.12);
  transition: transform 1.4s var(--ease-out), filter 0.9s var(--ease-soft);
  filter: saturate(0.88);
}
.hotel.is-active .hotel__media img,
html:not(.js) .hotel:hover .hotel__media img {
  transform: translate3d(var(--px), var(--py), 0) scale(1.03);
  filter: none;
}

.hotel__toggle {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: inherit; cursor: pointer;
}
.hotel.is-active .hotel__toggle { cursor: default; }
.hotel__toggle:focus-visible { outline: none; }
html:not(.js) .hotel__toggle { display: none; }

/* Caption hierarchy: short slogan → name → place, then statement + action when open */
.hotel__caption {
  position: relative; z-index: 3; pointer-events: none;
  display: flex; gap: 26px;
  padding: 18px 22px 20px;
  min-height: 0;
}
.hotel__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.hotel__meta {
  font: 600 11px/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  text-wrap: balance;
}
.hotel__tag { color: var(--muted); }

.hotel__name {
  margin-top: 12px;
  font: 500 clamp(24px, 2vw, 32px)/1.05 var(--font-display);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hotel__name span {
  display: block; margin-top: 6px;
  font: 500 11px/1.45 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}
/* Place closes the card at the bottom edge, so closed cards read complete */
.hotel__place {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 14px; line-height: 1.4; color: var(--ink);
}

/* Expanding body: the column opens from 0 to a fixed width; copy never reflows while it grows */
.hotel__body {
  flex: 0 0 auto; width: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: width 0.9s var(--ease-out), opacity 0.4s var(--ease-soft), visibility 0s linear 0.9s;
}
/* Open caption: a second column set off by a hairline with a short gold accent.
   Statement aligns with the name at the top; the action sits on the place line at the bottom. */
.hotel__body-inner {
  position: relative;
  width: var(--body-w); height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 2px 6px 6px 26px;              /* bottom/right room for the focus ring */
  border-left: 1px solid var(--rule);
}
.hotel__body-inner::before {
  content: ""; position: absolute; left: -1px; top: 0;
  width: 1px; height: 34px; background: var(--gold);
}
.js .hotel.is-active .hotel__body {
  width: var(--body-w); opacity: 1; visibility: visible;
  transition: width 0.9s var(--ease-out), opacity 0.6s var(--ease-soft) 0.3s, visibility 0s;
}

.hotel__line {
  max-width: 34ch;
  font: 500 19px/1.38 var(--font-display);
  letter-spacing: 0.005em;
  font-variant-numeric: lining-nums;   /* Cormorant defaults to old-style figures */
  color: var(--ink);
  text-wrap: pretty;
}
.hotel__cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  min-height: 46px; padding: 0 20px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: calc(var(--radius) - 3px);
  font: 600 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s;
}
.hotel__cta svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease-out); }
.hotel__cta:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--paper); }
.hotel__cta:hover svg { transform: translate(2px, -2px); }

/* Without JavaScript every hotel is open: stack the caption so all four fit */
html:not(.js) .hotel { grid-template-rows: minmax(260px, 1fr) auto; }
html:not(.js) .hotel__caption { flex-direction: column; gap: 12px; }
html:not(.js) .hotel__body { width: auto; opacity: 1; visibility: visible; overflow: visible; }
html:not(.js) .hotel__body-inner { width: auto; border-left: 0; padding-left: 0; }

/* ---------- Footer ---------- */

.footer {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 1.75fr) minmax(0, 2fr);
  gap: 0 clamp(40px, 5vw, 88px);
  align-items: start;
  margin: 16px var(--pad) 0; padding: clamp(36px, 5vh, 56px) 0 clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.footer__group { min-width: 0; }
.footer__label, .footer__wordmark { height: 18px; margin: 0 0 14px; }
.footer__label {
  font: 600 10px/18px var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep);
}
.footer__wordmark { font: 500 19px/18px var(--font-display); letter-spacing: 0.02em; color: var(--ink); }
.footer__legal { line-height: 28px; }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; }
.footer__contact a {
  display: inline-flex; align-items: center; min-height: 28px;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.footer__contact a:hover { text-decoration-thickness: 2px; }
.footer__address { margin-top: 6px; line-height: 1.6; }
.footer__links { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 40px; }
.footer__links a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  color: var(--ink); text-decoration: none;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.footer__links svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--gold-deep); stroke-width: 1.6; }
.footer__links a:hover { text-decoration-line: underline; text-decoration-color: var(--gold); }
@media (pointer: coarse) {
  .footer__contact a, .footer__links a { min-height: 44px; }
}

/* ---------- Tablet / phone: vertical selector ---------- */

@media (max-width: 1179px) {
  .masthead { padding: 58px var(--pad) 22px; }
  .masthead__logo img { width: min(76vw, 300px); }
  .lang { top: 8px; right: calc(var(--pad) - 10px); }

  .hotels { gap: 14px; }
  .hotels__bar { justify-content: center; text-align: center; }
  .hotels__dot { display: none; }
  .hotels__places { display: block; margin-top: 2px; }
  .hotels__list { flex-direction: column; gap: 12px; min-height: 0; }

  /* Closed row: thumbnail beside the caption on one card */
  .hotel {
    flex: none;
    grid-template-rows: auto; grid-template-columns: 116px minmax(0, 1fr);
    min-height: 116px;
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  }
  .hotel:hover, .hotel:focus-within { transform: none; }
  .hotel__media { margin: 8px 0 8px 8px; min-height: 100px; }
  .hotel__caption { padding: 14px 18px; align-items: center; }
  .hotel__id { justify-content: center; }
  .hotel__meta { font-size: 10px; }
  .hotel__name { margin-top: 6px; font-size: 25px; }
  .hotel__name span { display: none; }
  .hotel__place { margin-top: 6px; padding-top: 0; border-top: 0; font-size: 13px; color: var(--muted); }
  .js .hotel:not(.is-active) .hotel__body { display: none; }

  /* Open row: full-width photo above the caption, same card */
  .js .hotel.is-active, html:not(.js) .hotel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(200px, 54vw, 360px) auto;
    transform: translateY(-2px);
  }
  .js .hotel.is-active .hotel__media, html:not(.js) .hotel__media { margin: 8px 8px 0; }
  .js .hotel.is-active .hotel__caption, html:not(.js) .hotel__caption {
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 18px 18px 20px;
  }
  .js .hotel.is-active .hotel__name span, html:not(.js) .hotel__name span { display: block; }
  .js .hotel.is-active .hotel__place, html:not(.js) .hotel__place {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 14px;
  }
  .js .hotel.is-active .hotel__body { width: auto; overflow: visible; }
  .hotel__body-inner {
    width: auto; height: auto; gap: 16px;
    padding: 18px 0 0; border-left: 0;
  }
  .hotel__body-inner::before { left: 0; top: 0; width: 34px; height: 1px; }
  .hotel__line { max-width: none; font-size: 20px; }
  .hotel__cta { align-self: stretch; display: flex; justify-content: center; min-height: 52px; }

  .footer { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; padding: 32px 0 40px; }
  .footer__links { grid-template-columns: 1fr; gap: 0; }
  .footer__contact a, .footer__links a { min-height: 44px; }
}

/* ---------- Motion (only when the visitor allows it) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .masthead__logo img { animation: logo-in 1.6s var(--ease-out) 0.1s both; }
  .js .lang, .js .hotels__bar { animation: fade-up 1s var(--ease-out) 0.7s both; }
  .js .hotel { animation: panel-in 1.15s var(--ease-out) calc(0.85s + var(--i) * 0.13s) backwards; }
  .js .hotel .hotel__media img { animation: image-settle 2.2s var(--ease-out) calc(0.85s + var(--i) * 0.13s) both; }
  .js .footer { animation: fade-up 1s var(--ease-out) 1.6s both; }
}

@keyframes logo-in {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(6px); transform: translateY(8px); }
  60% { filter: blur(0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); transform: none; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(48px); clip-path: inset(100% 0 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes image-settle { from { scale: 1.16; } to { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .hotel__media img, .hotel.is-active .hotel__media img { transform: none; }
  .hotel:hover, .hotel:focus-within, .js .hotel.is-active { transform: none; }
}