/* ----------------------------------------------------------------------------
 * Homepage below-the-fold — editorial Scandinavian
 *
 * Reuses .service-page primitives (cream paper bg, .service-page__heading,
 * .service-page__lead, etc.) and adds a few homepage-only blocks:
 *   .home-pillars     — 3-up promise pillars with brass numerals
 *   .home-services    — 6-up service preview grid (no cards)
 *   .home-reviews     — editorial testimonial grid
 *   .home-partners    — clean single-row logo strip
 *   .home-cta-link    — prominent "Se alla tjänster" link
 * ------------------------------------------------------------------------- */

/* ============================================================
 * 1. Promise pillars (01 / 02 / 03)
 * ============================================================ */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  counter-reset: hp;
}

.home-pillar {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--sp-rule);
}

.home-pillar::before {
  counter-increment: hp;
  content: counter(hp, decimal-leading-zero);
  position: absolute;
  top: -2px;
  left: 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--sp-brass);
  background: var(--sp-paper);
  padding-right: 14px;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.home-pillar__title {
  margin: 0 0 12px;
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}

.home-pillar__body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--sp-ink-muted);
  max-width: 38ch;
}

@media (max-width: 760px) {
  .home-pillars {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ============================================================
 * 2. Service preview grid (homepage)
 * ============================================================ */
.home-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--sp-rule);
  border-left: 1px solid var(--sp-rule);
}

.home-service {
  position: relative;
  border-right: 1px solid var(--sp-rule);
  border-bottom: 1px solid var(--sp-rule);
}

.home-service__link {
  display: block;
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px);
  text-decoration: none;
  color: inherit;
  height: 100%;
  /* Without border-box, height: 100% + padding makes the link overflow
     its grid cell by the padding amount — which on the bottom row
     extends the click area down over the "Se alla våra tjänster" link
     and steals its clicks. */
  box-sizing: border-box;
}

/* Hover feedback lives on the link only — bumps the title and arrow. */
.home-service__link:hover .home-service__title {
  color: var(--sp-brass-deep);
}

.home-service__label {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-brass-deep);
}

.home-service__title {
  margin: 0 0 12px;
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--sp-ink);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}

.home-service__desc {
  margin: 0 0 24px;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sp-ink-muted);
  max-width: 40ch;
}

.home-service__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-brass-deep);
  transition: gap 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.home-service__link:hover .home-service__arrow {
  gap: 14px;
  color: var(--sp-ink);
}

@media (max-width: 760px) {
  .home-services {
    grid-template-columns: 1fr;
  }
}

/* "Se alla våra tjänster" CTA below the grid */
.home-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding: 18px 0;
  font-family: "Fraunces", "Lora", serif;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.005em;
  color: var(--sp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sp-brass);
  transition: gap 0.3s ease, border-color 0.2s ease, color 0.2s ease;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}

.home-cta-link:hover {
  gap: 22px;
  border-bottom-color: var(--sp-ink);
  color: var(--sp-ink);
}

.home-cta-link::after {
  content: "→";
  font-family: "Poppins", sans-serif;
  color: var(--sp-brass);
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.home-cta-link:hover::after {
  color: var(--sp-ink);
}

/* ============================================================
 * 3. Reviews — editorial testimonial grid (compact, 3-col)
 * ============================================================ */
.home-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--sp-rule);
  border-left: 1px solid var(--sp-rule);
}

.home-review {
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
  border-right: 1px solid var(--sp-rule);
  border-bottom: 1px solid var(--sp-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-review__stars {
  display: flex;
  gap: 3px;
  /* Original brand gold — pops against the cream paper */
  color: #ffc502;
  font-size: 13px;
  letter-spacing: 0;
}

.home-review__quote {
  margin: 0;
  flex: 1;
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--sp-ink);
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
  text-wrap: pretty;
}

.home-review__quote::before {
  content: "\201C";
  display: inline;
  margin-right: 2px;
  color: var(--sp-brass);
  font-size: 1em;
}

.home-review__quote::after {
  content: "\201D";
  margin-left: 2px;
  color: var(--sp-brass);
}

.home-review__meta {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--sp-rule);
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--sp-ink-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-review__author {
  font-weight: 500;
  color: var(--sp-ink);
  letter-spacing: 0;
}

.home-review__topic {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-brass-deep);
}

@media (max-width: 980px) {
  .home-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-reviews {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * 3b. Reviews dark band — full-bleed visual break that echoes
 *     the hero/footer ink colour. Single bold rhythm change,
 *     not a checkered pattern of tones.
 *
 *     Lighter / warmer dark than the hero so it reads as its own
 *     "feature spread" rather than a duplicate ink panel. Each
 *     review is a separate card on a barely-lit tile so quotes
 *     stay clearly distinct from one another.
 * ============================================================ */
.home-reviews-band {
  --rb-bg: #231F18;       /* warm dark, lighter than the hero ink */
  --rb-card: rgba(255, 255, 255, 0.035);
  --rb-cream: #F2EBDD;
  --rb-cream-soft: #C8C5BC;
  --rb-rule: rgba(242, 235, 221, 0.10);
  --rb-brass: #D4A361;

  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 88px) 0 clamp(56px, 7vw, 88px);
  margin-top: clamp(36px, 4.5vw, 56px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

/* Full-bleed warm dark backdrop, breaks out of .service-page__container */
.home-reviews-band::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--rb-bg);
  z-index: -2;
}

/* Faint architectural grid — same vocabulary as the hero/footer. */
.home-reviews-band::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(242, 235, 221, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 235, 221, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%);
}

/* Type overrides for the dark band */
.home-reviews-band .service-page__section-eyebrow {
  color: var(--rb-brass);
}

.home-reviews-band .service-page__heading {
  color: var(--rb-cream);
}

.home-reviews-band .service-page__heading em {
  color: var(--rb-brass);
}

/* Visible aggregate rating badge — keeps schema-visible-content in sync
   with the AggregateRating JSON-LD on the global LocalBusiness. */
.home-reviews-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  color: var(--rb-cream-soft);
}

.home-reviews-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: #ffc502;
  font-size: 14px;
}

.home-reviews-rating__value {
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--rb-cream);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.home-reviews-rating__sep {
  color: var(--rb-rule);
}

.home-reviews-rating__count {
  color: var(--rb-cream-soft);
}

/* Review grid: separated tiles via gap, no shared borders.
   Each review gets its own subtly-lit card. */
.home-reviews-band .home-reviews {
  border: 0;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(32px, 4vw, 48px);
}

.home-reviews-band .home-review {
  border: 0;
  background: var(--rb-card);
  border-radius: 3px;
  padding: clamp(22px, 2.6vw, 30px);
}

/* Quotes in Poppins for legibility on the dark band — Fraunces italic
   was charming but hard to read at body size. Curly quote marks keep
   the editorial flavour. */
.home-reviews-band .home-review__quote {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--rb-cream);
  font-variation-settings: normal;
}

.home-reviews-band .home-review__quote::before,
.home-reviews-band .home-review__quote::after {
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  color: var(--rb-brass);
}

.home-reviews-band .home-review__meta {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rb-rule);
  color: var(--rb-cream-soft);
}

.home-reviews-band .home-review__author {
  color: var(--rb-cream);
}

.home-reviews-band .home-review__topic {
  color: var(--rb-brass);
}

/* Stars stay brand-gold (#ffc502) — pop nicely against the warm dark. */

/* ============================================================
 * 4. Partners — clean single-row logo strip
 * ============================================================ */
.home-partners {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--sp-rule);
  border-bottom: 1px solid var(--sp-rule);
}

.home-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.home-partner a {
  display: block;
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease;
  filter: grayscale(1) contrast(0.9);
}

.home-partner a:hover {
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

.home-partner img {
  display: block;
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 980px) {
  .home-partners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    padding: 36px 0;
  }
}

@media (max-width: 560px) {
  .home-partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}