/* ==========================================================================
   Lamsaty Silky — responsive.css
   Tablet (≥768px) and desktop (≥1024px) overrides. Mobile-first base
   lives in styles.css. Logical properties only — mirrors with dir flip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — ≥768px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body {
    font-size: 1rem;
  }

  h3 {
    font-size: 1.1875rem;
  }

  /* ----- Navbar: full horizontal nav, no hamburger ----- */
  .hamburger {
    display: none;
  }

  .nav__links,
  .nav__links.open {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    position: static;
    width: auto;
    background-color: transparent;
    box-shadow: none;
    padding-block: 0;
    border-block-start: none;
  }

  .nav__link {
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-btn);
  }

  /* ----- Sticky bar is mobile-only ----- */
  .sticky-cta {
    display: none;
  }

  .toast {
    inset-block-end: 2rem;
  }

  /* ----- Hero ----- */
  .hero__image {
    width: min(100%, 480px);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }

  /* ----- Pack grid: 2 columns ----- */
  .pack__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  /* ----- Benefits: 2 × 2 ----- */
  .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.75rem 2rem;
  }

  /* ----- Steps: horizontal 3 columns with connector ----- */
  .steps {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .step {
    flex: 1;
    max-width: none;
    padding-inline: 0.5rem;
  }

  .step:not(:last-child)::after {
    position: absolute;
    inset-block-start: 23px; /* aligns with the 48px number circle center */
    inset-inline-start: calc(50% + 36px);
    width: calc(100% - 72px + 2rem);
    height: 2px;
    margin: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  }

  /* ----- FAQ ----- */
  .faq__list {
    padding-inline: 2rem;
  }

  /* ----- Footer ----- */
  .footer {
    padding-block: 3.5rem 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Desktop — ≥1024px
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* ----- Navbar ----- */
  .nav__links {
    gap: 0.5rem;
  }

  /* ----- Hero: 2-column split, text aligned to reading start ----- */
  .hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3.5rem;
  }

  .hero__content {
    text-align: start;
    max-width: none;
    justify-self: start;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__price {
    align-items: flex-start;
  }

  .hero__image {
    width: 100%;
    max-width: 480px;
    justify-self: center;
  }

  .nav__cta {
    display: inline-flex;
  }

  /* ----- Pack grid: 4 across ----- */
  .pack__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  /* ----- Benefits: more air ----- */
  .benefits__grid {
    gap: 3.25rem 3rem;
    margin-block-start: 3rem;
  }

  /* ----- Colors: figure | panel ----- */
  .colors__layout {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .colors__figure {
    width: 100%;
    max-width: 460px;
    justify-self: end;
  }

  .colors__panel {
    align-items: flex-start;
    text-align: start;
    justify-self: start;
    max-width: 32rem;
  }

  .swatches,
  .colors__price {
    justify-content: flex-start;
  }

  /* ----- Steps ----- */
  .steps {
    gap: 3rem;
    margin-block-start: 3rem;
  }

  .step:not(:last-child)::after {
    width: calc(100% - 72px + 3rem);
  }

  /* ----- Sections: slightly larger gaps ----- */
  .section__subtitle {
    margin-block-end: 3rem;
  }
}