/* Daylight theme — offer-bands. Split from daylight.css (see docs/adr/0002). */

/* ---------- "Ett pris. Allt klart." band (homepage 1b) ----------
   Checklist left, the photo deck (moved here from the hero) right. */
.incl-sec {
  padding-block: clamp(72px, 8vw, 110px);
}

.incl-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.incl-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.incl-copy > p {
  margin: 12px 0 26px;
  max-width: 46ch;
  color: var(--c-ink-muted);
}

.incl-copy .check-grid {
  grid-template-columns: 1fr 1fr;
}

/* The checklist is the section's claim — full ink and a step up in weight */
.incl-copy .check-grid li {
  font-weight: 500;
  color: var(--tx);
}

/* The deck's prints are wider here than the hero's old 4/5 crop. height:auto
   lets the aspect-ratio actually reserve the box — .photo-mat img pins both
   width and height to 100%, which would otherwise void aspect-ratio and leave
   the slide unsized until the photo (or carousel.js) loads, shifting layout. */
.deck--wide .carousel-slide img {
  aspect-ratio: 5 / 4;
  height: auto;
}

/* Wide desktops bump the generic hero fan to 3 × 44px; the deck now sits
   inside the container, so rein its spread in to stay within the page
   margin (no horizontal scroll) while keeping the three fanned edges */
@media (min-width: 1440px) {
  html.js .deck--wide {
    --stack-x: 24px;
    --stack-y: 14px;
  }
}

@media (max-width: 900px) {
  .incl-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .incl-copy .check-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Persona catalog ---------- */
.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.catalog-item {
  background: var(--c-dagsljus);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--speed), transform var(--speed) var(--ease), box-shadow var(--speed);
}

.catalog-item:hover {
  border-color: var(--c-gran);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-soft);
}

.catalog-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.catalog-body {
  padding: 20px 22px 24px;
}

.catalog-body .tag {
  display: inline-block;
  margin-bottom: 12px;
}

.catalog-item h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
}

.catalog-item p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tx-muted);
}

@media (max-width: 1000px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .catalog { grid-template-columns: 1fr; }
}

/* ---------- Amenities check grid (service pages) ---------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}

.check-grid li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-block: 11px;
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--tx-muted);
}

.check-grid li::before {
  content: "✓";
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--c-gran);
}