/* responsive.css | CaringSoul HealthCare | larger screens */

@media (min-width: 640px) {
  .container { padding: 0 32px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .row-2 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  section { padding: 104px 0; }
  .hero { padding-top: 84px; }
  .hero-grid { grid-template-columns: 1.35fr .9fr; align-items: center; gap: 64px; }
  .audience { grid-template-columns: 1fr 1fr; }
  .aud { padding: 44px 40px; }
  .area-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .founder { grid-template-columns: 380px 1fr; gap: 56px; }
  .values { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .svc-detail { grid-template-columns: 64px 1fr 1fr; gap: 32px; align-items: start; }
  .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .page-hero { padding: 88px 0 64px; }

  /* horizontal pathway */
  .steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .step { padding: 64px 0 0; text-align: center; }
  .step::before { left: calc(50% + 22px); right: calc(-50% + 2px); top: 21px; bottom: auto; width: auto; height: 2px; }
  .step-dot { left: 50%; transform: translateX(-50%); }
}

@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid .svc:nth-child(10) { grid-column: 2; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-links {
    position: static; transform: none; opacity: 1; flex-direction: row; align-items: center; gap: 4px;
    padding: 0; background: none; border: 0; box-shadow: none; z-index: auto;
  }
  .nav-links a { padding: 8px 12px; border: 0; border-radius: 8px; font-size: .96rem; position: relative; }
  .nav-links a:not(.btn):hover { color: var(--blue); }
  .nav-links a.active:not(.btn)::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--gold);
  }
  .nav-links .nav-cta { margin: 0 0 0 10px; padding: 0 18px; min-height: 42px; font-size: .92rem; }
  .nav-links .btn-primary { color: var(--white); }
}

/* v2 additions */
@media (min-width: 640px) {
  .util-fax { display: inline; }
  .finder-tabs { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .hero-photo { min-height: 560px; display: flex; align-items: center; }
  .hero-bg {
    display: block; position: absolute; inset: 0;
    background: url('../assets/hero-iv-nurse.jpg') 70% center / cover no-repeat;
  }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(246, 249, 253, .97) 0%, rgba(246, 249, 253, .9) 34%, rgba(246, 249, 253, 0) 58%);
  }
  .hero-inner { padding-top: 88px; padding-bottom: 120px; width: 100%; }
  .hero-copy { max-width: 560px; }
  .hero-mobile-img { display: none; }
  .finder { margin-top: -64px; padding: 28px 32px; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-items: start; }
  .finder-label { grid-column: 1 / -1; }
  .finder-tabs { flex-direction: column; flex-wrap: nowrap; margin: 0; min-width: 270px; }
  .check-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .checker .q { grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
}
@media (min-width: 900px) {
  .hero-photo h1.display { font-size: clamp(2.8rem, 5vw, 4.1rem); }
  .hero-copy { max-width: 500px; }
  .hero-bg { background-position: 85% center; }
  .hero-bg::after { background: linear-gradient(90deg, rgba(246, 249, 253, .98) 0%, rgba(246, 249, 253, .94) 40%, rgba(246, 249, 253, .55) 52%, rgba(246, 249, 253, 0) 64%); }
}
.hero-copy{max-width:560px}@media(min-width:900px){.hero-photo h1.display{font-size:clamp(2.8rem,4.6vw,3.9rem)}}

/* v3: inner page hero photo beside the text */
@media (min-width: 900px) {
  .page-hero.with-img .container { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .page-hero.with-img h1.display { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
}