/* svet home: hero, service strip, popular products, chandeliers in a room, categories, about the shop.
   The layout follows a furniture/home-goods landing (Parachute Home via Inspo, 27.09): a full-bleed room photo with
   the headline over it, then the shop's promises, products, room photos and a word from the shop. */

/* ---- Hero: stories with our chandeliers, one at a time (js/hero.js).
   Phones and tablets: the room on top fading into a dark band with the text; from 1024 px the photo fills the
   first screen and the text sits over it, bottom left. ---- */
.s-hero { --light: #FFF8EE; position: relative; background: var(--ink); color: var(--light); }
.s-hero__slides { display: grid; }
.s-hero__slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.s-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease); }
.s-hero__photo { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.s-hero__slide::after { content: ""; grid-area: 1 / 1; pointer-events: none; background: linear-gradient(to top, var(--ink) 0%, rgb(34 28 21 / .55) 22%, rgb(34 28 21 / 0) 50%); }
.s-hero__text {
  position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; gap: var(--s-4);
  margin-top: calc(-1 * var(--s-8)); padding: 0 var(--gutter) calc(var(--s-5) + 52px);
}
.s-hero__slide.is-active .s-hero__text > * { animation: s-reveal var(--dur-reveal) var(--ease) both; }
.s-hero__slide.is-active .s-hero__text > :nth-child(2) { animation-delay: 80ms; }
.s-hero__slide.is-active .s-hero__text > :nth-child(3) { animation-delay: 160ms; }
.s-hero__title { margin: 0; max-width: 16ch; color: inherit; text-shadow: 0 1px 24px rgb(20 14 8 / .45); font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); line-height: 1.05; text-wrap: balance; }
.s-hero__lead { margin: 0; max-width: 42ch; color: rgb(255 248 238 / .88); font-size: var(--fs-l); }
.s-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-2) 0 0; }
.s-btn--light { border-color: var(--light); background: var(--light); color: var(--ink); }
.s-hero__all { color: var(--light); text-underline-offset: .2em; }
.s-hero__nav { position: absolute; z-index: 2; left: var(--gutter); bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2); }
.s-hero__arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 248 238 / .45); border-radius: 50%; background: none; color: var(--light); cursor: pointer; }
.s-hero__arrow[data-prev] .s-i { rotate: 180deg; }
.s-hero__dot { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; }
.s-hero__dot::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: rgb(255 248 238 / .45); transition: width 300ms var(--ease), background 300ms var(--ease); }
.s-hero__dot[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--light); }
.s-hero :focus-visible { outline-color: var(--light); }
@media (hover: hover) {
  .s-hero__arrow:hover { background: rgb(255 248 238 / .14); }
  .s-btn--light:hover { border-color: #fff; background: #fff; color: var(--ink); }
}
@media (min-width: 1024px) {
  /* the first screen, but never wider than 1.9 : 1 (at least 78 % of the photo's height stays). The lamp hangs at the top:
     the frame starts just above it (--top % of the 3:2 photo's height, 100vw / 1.5) and the rest shows the people below;
     no shift when the photo is not taller than the frame */
  .s-hero__photo {
    --h: max(clamp(520px, calc(100svh - var(--header-h) - 104px), 860px), 52vw);
    aspect-ratio: auto; height: var(--h);
    object-position: 50% max(calc(var(--top, 0) * -.6667vw), min(0px, calc(var(--h) - 66.67vw)));
  }
  .s-hero__slide::after { background:
    linear-gradient(90deg, rgb(20 14 8 / .55) 0%, rgb(20 14 8 / .2) 34%, rgb(20 14 8 / 0) 55%),
    linear-gradient(to top, rgb(20 14 8 / .55) 0%, rgb(20 14 8 / 0) 45%); }
  .s-hero__text {
    grid-area: 1 / 1; align-self: end; margin: 0;
    padding: var(--s-8) var(--gutter) calc(var(--s-7) + 56px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
  .s-hero__nav { bottom: var(--s-7); left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__slide, .s-hero__slide.is-active { transition: none; }
}

/* ---- Service strip right under the hero ---- */
.s-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .s-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.s-strip__item { display: flex; align-items: flex-start; gap: var(--s-3); }
.s-strip__item .s-i { flex: none; width: 28px; height: 28px; color: var(--amber); }
.s-strip__item p { display: grid; gap: 2px; margin: 0; font-size: var(--fs-s); line-height: 1.35; }
.s-strip__item span { color: var(--ink-2); }
.s-strip__title { color: var(--ink); font-weight: 600; text-decoration: none; }
a.s-strip__title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
@media (hover: hover) { a.s-strip__title:hover { text-decoration-color: currentColor; } }

/* ---- Sections ---- */
.s-home__section { margin-top: var(--section); }
.s-home__title { margin: 0 0 var(--s-5); }
.s-home__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.s-home__head .s-home__title { margin: 0; }
.s-home__more { font-size: var(--fs-s); }
@media (hover: hover) { .s-home__more:hover { color: var(--amber-ink); } }

/* ---- Chandeliers in a room: square room photos of lamps in stock, each opens its product ---- */
.s-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .s-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
.s-room__link { display: grid; gap: var(--s-1); color: inherit; text-decoration: none; }
.s-room__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: var(--s-2); border-radius: var(--r-m); object-fit: cover; transition: filter var(--dur) var(--ease); }
.s-room__name { display: -webkit-box; overflow: hidden; font-size: var(--fs-s); line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.s-room__price { font-weight: 600; }
@media (hover: hover) {
  .s-room__link:hover .s-room__photo { filter: brightness(1.06); }
  .s-room__link:hover .s-room__name { text-decoration: underline; text-underline-offset: .2em; }
}

/* ---- Categories: small cards, a swipeable row on phones ---- */
.s-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 40%); gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.s-tiles::-webkit-scrollbar { display: none; }
.s-tile { scroll-snap-align: start; }
.s-tile .s-card__media img { width: 72%; }
.s-tile .s-card__name { font: 400 var(--fs-l)/1.2 var(--font-display); overflow-wrap: anywhere; hyphens: auto; } /* long Latvian words */
@media (min-width: 768px) {
  .s-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); overflow: visible; }
}

/* ---- About the shop: a room photo and a word from the shop with its phone ---- */
.s-about { margin-bottom: calc(-1 * var(--section)); padding-block: var(--section); background: var(--paper-2); } /* the band meets the footer */
.s-about__inner { display: grid; gap: var(--s-6); }
.s-about__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 70svh; border-radius: var(--r-m); object-fit: cover; }
.s-about__text { display: grid; justify-items: start; align-content: center; gap: var(--s-4); }
.s-about__label { margin: 0; color: var(--amber-ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; }
.s-about__title { margin: 0; max-width: 18ch; font-size: var(--fs-h2); text-wrap: balance; }
.s-about__lead { margin: 0; max-width: 44ch; color: var(--ink-2); font-size: var(--fs-l); }
.s-about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-2) 0 0; }
@media (min-width: 1024px) {
  .s-about__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
  .s-about__photo { max-height: none; }
}