/* ================================================================
   KALAI — HOMEPAGE (index.html)
   Sections: 1 Main picture · 2 New In slider · 3 Linen loop video ·
   4 Linen Journal slider · 5 Fashion collection loop video
   ================================================================ */

/* ---------------- 1. Main picture ---------------- */
.h-hero {
  position: relative;
  height: clamp(540px, calc(100svh - var(--k-header-h)), 760px);
  overflow: hidden;
  background: #4a3e33;
  color: #fff;
}
.h-hero__media,
.h-hero__media img,
.h-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Optional hero video (set in the admin) sits over the image */
.h-hero__media video { object-fit: cover; object-position: 62% 30%; }
.h-hero__media img {
  object-fit: cover;
  object-position: 62% 30%;
  transform-origin: 70% 40%;
  animation: hHeroDrift 24s ease-in-out infinite alternate;
}
.h-hero.is-paused .h-hero__media img { animation-play-state: paused; }
@keyframes hHeroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }

.h-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 28, 20, .72) 0%, rgba(38, 28, 20, .48) 34%, rgba(38, 28, 20, .08) 62%, rgba(38, 28, 20, 0) 100%),
    linear-gradient(0deg, rgba(20, 14, 10, .28) 0%, rgba(20, 14, 10, 0) 30%);
  pointer-events: none;
}

.h-hero__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.h-hero__copy .k-eyebrow { font-size: 12px; letter-spacing: .3em; opacity: .92; }
.h-hero__copy .k-eyebrow i { font-style: normal; margin: 0 .55em; opacity: .8; }
.h-hero__copy h1 {
  margin-top: 26px;
  font-family: var(--k-display);
  font-weight: 400;
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.005em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}
.h-hero__copy p {
  margin-top: 24px;
  font-family: var(--k-serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}
.h-hero__copy .k-btn { margin-top: 34px; min-width: 200px; }

.h-hero__pause {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .9;
}
.h-hero__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.h-hero__pause .h-playi { display: none; fill: currentColor; stroke: none; }
.h-hero.is-paused .h-pause { display: none; }
.h-hero.is-paused .h-playi { display: block; }

/* Entrance */
.h-hero__copy > * { animation: hRise 1s var(--k-ease) both; }
.h-hero__copy > :nth-child(2) { animation-delay: .08s; }
.h-hero__copy > :nth-child(3) { animation-delay: .18s; }
.h-hero__copy > :nth-child(4) { animation-delay: .28s; }
@keyframes hRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------------- 2. New In ---------------- */
.h-newin { padding: 44px 0 46px; }
.h-newin__slider { --k-cols: 6; --k-gap: 18px; --k-arrow-top: 40%; }

/* ---------------- 3. Linen loop video ---------------- */
.h-linen {
  position: relative;
  height: clamp(420px, 56vw, 600px);
  max-height: 72vh;
  min-height: 420px;
  overflow: hidden;
  background: #d8cfc2;
}
.h-linen__media { position: absolute; inset: 0; }
.h-linen__poster,
.h-linen__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.h-linen.no-video .h-linen__video { display: none; }
.h-linen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(236, 229, 218, .9) 0%, rgba(236, 229, 218, .72) 32%, rgba(236, 229, 218, .1) 58%, rgba(236, 229, 218, 0) 100%);
  pointer-events: none;
}
.h-linen__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--k-ink);
}
.h-linen__copy .k-eyebrow { color: var(--k-ink-2); letter-spacing: .32em; }
.h-linen__copy h2 {
  margin-top: 22px;
  font-family: var(--k-display);
  font-weight: 400;
  font-size: clamp(46px, 5vw, 76px);
  line-height: .98;
}
.h-linen__copy p {
  max-width: 440px;
  margin-top: 18px;
  font-family: var(--k-serif);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.55;
  color: var(--k-ink-2);
}
.h-linen__copy .k-btn { margin-top: 26px; min-width: 210px; }

/* ---------------- 4. Linen Journal ---------------- */
.h-journal { padding: 48px 0 44px; }
.h-journal__title { font-size: clamp(30px, 3vw, 44px); letter-spacing: .06em; }
.h-journal__slider { --k-cols: 4; --k-gap: 26px; --k-arrow-top: 30%; }

.h-article { display: block; min-width: 0; }
.h-article__img { aspect-ratio: 19 / 10; overflow: hidden; background: var(--k-bg-2); }
.h-article__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--k-ease); }
.h-article:hover .h-article__img img { transform: scale(1.04); }
.h-article__tag {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--k-ink-2);
}
.h-article h3 {
  margin-top: 10px;
  font-family: var(--k-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.h-article:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------------- 5. Fashion collection loop video ---------------- */
.h-runway {
  position: relative;
  height: clamp(460px, 48vw, 660px);
  overflow: hidden;
  background: var(--k-dark);
  color: #fff;
}
.h-runway__media { position: absolute; inset: 0; overflow: hidden; }
.h-runway__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; }
.h-runway__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.h-runway__frame.ready { opacity: 1; }
/* Cover-fit a 16:9 iframe whatever the section's shape */
.h-runway__frame iframe,
.h-runway__frame video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, calc(var(--h, 660px) * 16 / 9));
  height: max(100%, calc(var(--w, 1440px) * 9 / 16));
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
  pointer-events: none;
}
.h-runway::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 6, 4, .82) 0%, rgba(8, 6, 4, .55) 32%, rgba(8, 6, 4, .12) 60%, rgba(8, 6, 4, .25) 100%);
  pointer-events: none;
}
.h-runway__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.h-runway__copy .k-eyebrow { letter-spacing: .36em; opacity: .9; }
.h-runway__copy h2 {
  margin-top: 22px;
  font-family: var(--k-display);
  font-weight: 400;
  font-size: clamp(50px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.h-runway__sub {
  margin-top: 8px;
  font-family: var(--k-italic);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
}
.h-runway__event {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.h-runway__copy .k-btn { margin-top: 30px; }

.h-runway__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.h-runway__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.h-runway__ctrl {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 4vw, 56px);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.h-runway__ctrl .k-arrow { color: #fff; width: 34px; height: 34px; }
.h-runway__ctrl .k-arrow .k-icon { width: 20px; height: 20px; }
.h-runway__count { margin-right: 10px; font-size: 13px; letter-spacing: .14em; }
.h-runway__count b { font-weight: 500; }
/* Runway section with no films / one film (set in the admin) */
.h-runway.no-films .h-runway__play,
.h-runway.no-films .h-runway__ctrl,
.h-runway.single-film .h-runway__ctrl .k-arrow { display: none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1180px) {
  .h-newin__slider { --k-cols: 4; }
  .h-journal__slider { --k-cols: 3; }
}

@media (max-width: 960px) {
  .h-hero { height: min(78svh, 640px); min-height: 520px; }
  .h-hero__media img,
  .h-hero__media video { object-position: 68% 30%; }
  .h-hero::after {
    background: linear-gradient(0deg, rgba(30, 22, 16, .78) 0%, rgba(30, 22, 16, .42) 46%, rgba(30, 22, 16, .08) 100%);
  }
  .h-hero__copy { justify-content: flex-end; padding-bottom: 72px; }

  /* Sliders become free-swipe with a peek of the next card */
  .h-newin__slider { --k-cols: 2.4; --k-gap: 14px; }
  .h-journal__slider { --k-cols: 1.6; --k-gap: 18px; }

  .h-linen { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column-reverse; }
  .h-linen__media { position: relative; height: 300px; }
  .h-linen::after { display: none; }
  .h-linen__copy { padding-top: 48px; padding-bottom: 48px; background: #ece5da; height: auto; }

  .h-runway { height: auto; min-height: 560px; }
  .h-runway::after { background: linear-gradient(0deg, rgba(8, 6, 4, .88) 0%, rgba(8, 6, 4, .5) 52%, rgba(8, 6, 4, .2) 100%); }
  .h-runway__copy { justify-content: flex-end; min-height: 560px; padding-top: 180px; padding-bottom: 84px; }
  .h-runway__play { top: 32%; }
  .h-runway__ctrl { bottom: 18px; }
}

@media (max-width: 600px) {
  .h-hero__copy h1 { font-size: 52px; }
  .h-hero__copy .k-eyebrow { font-size: 10.5px; letter-spacing: .24em; }
  .h-hero__copy .k-btn { width: 100%; }
  .h-newin { padding: 34px 0 36px; }
  .h-newin__slider { --k-cols: 1.75; }
  .h-journal { padding: 38px 0 36px; }
  .h-journal__slider { --k-cols: 1.25; }
  .k-section-head { align-items: center; flex-wrap: wrap; row-gap: 10px; }
  .h-journal__title { font-size: 28px; }
  .k-section-head .k-link-arrow { font-size: 10px; letter-spacing: .16em; }
  .h-linen__media { height: 240px; }
  .h-runway__copy .k-btn { width: 100%; }
  .h-runway__event { font-size: 11px; letter-spacing: .22em; }
}