/* ==========================================================================
   PNG To DDS — responsive.css
   Breakpoints. Mobile-first refinements layered on top of the base rules.
   ========================================================================== */

/* ----- Hero (defined here so it can restructure cleanly) -----
   The hero is a single centred column: headline, one line of support copy,
   and the converter itself sitting directly underneath. */
.hero { padding-block: var(--space-8) var(--space-9); }
.hero__inner {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.hero__title {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: var(--space-4);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-on-dark);
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* ----- Tablet / small laptop ----- */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .footer__grid { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Note: the converter and the how-to-use steps carry their own breakpoints at
   the end of tool.css, because tool.css is loaded after this file and would
   otherwise win over any rule written here. */

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .split-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .split-layout__media { max-width: 520px; margin-inline: auto; }
  .faq-grid { grid-template-columns: 1fr; }
  .review-card { flex-basis: calc((100% - var(--space-5)) / 2); }
}

@media (max-width: 640px) {
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-6); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, max-content); justify-content: space-between; }
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .review-card { flex-basis: 100%; }
  .hero { padding-block: var(--space-7) var(--space-8); }
  .hero__lead { margin-bottom: var(--space-5); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); justify-content: start; }
  .container { padding-inline: var(--space-4); }
}