/* ==========================================================================
   PAGE: Service
   ========================================================================== */

/* ----- ServiceContent1: intro with a framed photo ----- */
.svc-intro {
  padding-block: var(--section-space);

  .svc-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: clamp(40px, 6vw, 80px);
  }

  h1 {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  h2 {
    margin-bottom: 18px;
    font-size: 1.25rem;
    color: var(--primary-strong);
  }

  p {
    color: var(--text-muted);
  }

  .svc-intro-callout {
    margin: 8px 0 0;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--secondary-color);
    background: var(--primary-soft);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .svc-intro-media {
    position: relative;
    isolation: isolate;
    margin: 0;

    img {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: var(--radius-lg);
    }

    &::after {
      content: "";
      position: absolute;
      right: -18px;
      bottom: -18px;
      z-index: -1;
      width: 60%;
      height: 60%;
      background: var(--primary-color);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
  }
}

/* ----- ServiceContent2: what's included ----- */
.svc-includes {
  padding-block: var(--section-space);
  background: var(--surface-alt);

  .svc-includes-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
  }

  h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  }

  .svc-includes-copy p {
    margin: 0;
    color: var(--text-muted);
  }
}

/* ----- ServiceContent3: benefits ----- */
.svc-benefits {
  padding-block: var(--section-space);

  h2 {
    max-width: 22ch;
    margin-bottom: 36px;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  }
}

/* ----- ServiceContent4: situations + climate panel ----- */
.svc-situations {
  padding-block: var(--section-space);

  .svc-situations-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
  }

  .svc-situations-main {
    h2 {
      font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    }

    p {
      color: var(--text-muted);
    }
  }

  .svc-climate {
    position: relative;
    padding: 36px 32px;
    color: var(--text-on-dark);
    background: var(--secondary-color);
    border-radius: var(--radius-lg);

    h2 {
      font-size: 1.5rem;
    }

    p {
      color: var(--text-on-dark-muted);
    }
  }

  .svc-climate-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    font-size: 1.6rem;
    color: var(--secondary-color);
    background: var(--primary-color);
    border-radius: 50%;
  }
}

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

    .svc-intro-media img {
      aspect-ratio: 4 / 3;
    }

    .svc-intro-media::after {
      right: -8px;
      bottom: -8px;
    }
  }

  .svc-includes .svc-includes-grid,
  .svc-situations .svc-situations-grid {
    grid-template-columns: 1fr;
  }
}