/**
 * mobile.css — phone layout for the marketing pages (home, services, about,
 * become-a-pandit, 404). Loaded after each page's own stylesheet so it can
 * override it, and nothing in here applies above 640px.
 *
 * Everything stacks into a single column on a phone, so copy is centred
 * instead of hanging off the left edge. Forms are the exception: labels,
 * typed text and error messages read best from a fixed left edge, so every
 * form keeps its left alignment.
 *
 * The footer lives in layout.css (every page has one, including the booking
 * flow and the dashboard), and the booking flow's own tweaks in booking.css.
 */
@media (max-width: 640px) {

  /* ================= SHARED ================= */
  main { text-align: center; }

  /* Forms and pickers keep a left edge. */
  .apply-form,
  .contact-form,
  .all-services__controls,
  .search-results,
  .autocomplete-list,
  .wallet-mock { text-align: left; }

  /* A column of centred blocks rather than a two-sided row. display:block
     also neutralises the flex-basis some headers set inline. */
  .section-head { display: block; }
  .section-head > * + * { margin-top: 12px; }
  .section-head h2,
  .section-head p,
  .lede { margin-inline: auto; }

  .eyebrow,
  .pill-gold { justify-content: center; }
  .chip-row,
  .meta-row { justify-content: center; }

  .check-list { grid-template-columns: 1fr; justify-items: center; }

  .note-card { flex-direction: column; align-items: center; text-align: center; }
  .note-card svg { margin-top: 0; }

  /* The question sits between two equal spacers — an empty one on the left
     matching the chevron on the right — so it is optically centred. */
  .accordion__trigger { text-align: center; }
  .accordion__trigger::before { content: ""; width: 18px; flex-shrink: 0; }
  .accordion__panel p { margin-inline: auto; }

  .ribbon__inner { flex-direction: column; justify-content: center; text-align: center; }
  .ribbon__text { flex-direction: column; gap: 6px; }

  /* ================= HOME: HERO ================= */
  /* The photos are landscape. Filling a tall phone-sized frame with them
     crops away most of each picture, so on a phone the picture keeps its own
     shape at the top of the slide and the copy sits underneath it. */
  .hero { height: auto; }
  .hero__slide {
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--maroon-900);
  }
  .hero__art {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  /* Only a soft fade from the bottom of the picture into the maroon below. */
  .hero__slide::before { display: none; }
  .hero__slide::after {
    inset: 0 0 auto;
    aspect-ratio: 16 / 10;
    background: linear-gradient(0deg, var(--maroon-900) 0%, rgba(46, 10, 17, 0) 42%);
  }
  .hero__grain { display: none; }
  .hero__copy { position: relative; inset: auto; }
  .hero__copy > div {
    align-items: center;
    padding: 4px var(--gutter) 22px;
    text-align: center;
  }
  .hero__tag,
  .hero__cta { align-self: center; }
  .hero__tag { white-space: normal; }
  .hero__title,
  .hero__blurb { margin-inline: auto; }
  .hero__facts { justify-content: center; }

  /* Swiping replaces the arrows. The thumbnails become a row of dots that
     still show where you are and still work as taps. */
  .hero__arrows { display: none; }
  .hero__controls { position: relative; inset: auto; padding-bottom: 22px; }
  .hero__controls > div { justify-content: center; }
  .hero__thumbs {
    flex: 0 0 auto;
    justify-content: center;
    gap: 2px;
    overflow: visible;
  }
  .hero__thumb {
    flex: 0 0 auto;
    padding: 12px 5px;
    border: none;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .hero__thumb:hover { transform: none; }
  .hero__thumb[aria-current="true"] { background: none; box-shadow: none; }
  .hero__thumb-day,
  .hero__thumb-name { display: none; }
  .hero__thumb-bar {
    width: 22px;
    height: 5px;
    margin: 0;
    background: rgba(255, 248, 240, .32);
    transition: width var(--t), background var(--t);
  }
  .hero__thumb[aria-current="true"] .hero__thumb-bar {
    width: 36px;
    background: var(--gold);
    box-shadow: 0 0 14px -2px rgba(224, 163, 37, .9);
  }

  /* ================= HOME: SECTIONS ================= */
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .trust-row__item { flex-direction: column; text-align: center; gap: 8px; }
  .trust-row__item span { display: block; line-height: 1.45; }

  .timeline__item { align-items: center; }
  .timeline__rail { justify-content: center; }
  .timeline__dash { display: none; }

  .duration-row { justify-content: center; }

  /* Each rite becomes a centred tile: tick, name and note, then the price. */
  .rite {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }
  .rite__head { justify-content: center; }
  .rite__price { text-align: center; }

  .estimate__head { text-align: center; }
  .estimate__line,
  .estimate__total { text-align: left; }

  .service-card { align-items: center; text-align: center; }
  .service-card__top { justify-content: center; flex-wrap: wrap; }
  .service-card__chips { justify-content: center; }
  .service-card__foot { align-self: stretch; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }

  .steps__n { margin-inline: auto; }

  .closing { justify-content: center; }
  .closing__copy h2,
  .closing__copy p { margin-inline: auto; }
  .closing__actions { flex: 1 1 100%; }

  /* ================= SERVICES ================= */
  .helper { justify-content: center; text-align: center; }
  .helper__copy h2,
  .helper__copy p { margin-inline: auto; }
  .helper__prompt { text-align: center; }

  .occasion__toggle { flex-direction: column; align-items: center; text-align: center; }
  .occasion__head { justify-content: center; }
  .puja-card { align-items: center; text-align: center; }
  .puja-card__foot { align-self: stretch; justify-content: center; }
  .occasion__foot { flex-direction: column; text-align: center; }
  .occasion__foot p { margin-inline: auto; }

  .popular-card { align-items: center; text-align: center; }
  .popular-card__top { flex-direction: column; gap: 10px; }
  .popular-card__foot { align-self: stretch; justify-content: center; gap: 8px 20px; }

  .festival__top { flex-direction: column; gap: 8px; }

  .all-services__filters { justify-content: center; }
  .all-card { align-items: center; text-align: center; }
  .all-card__top { flex-direction: column; gap: 8px; max-width: 100%; }
  .all-card__cat { max-width: 100%; }
  /* Price and Book stay side by side, centred as a pair — stacking them
     would add a screen of scrolling to a list this long. */
  .all-card__foot { align-self: stretch; justify-content: center; gap: 8px 24px; }

  /* ================= ABOUT ================= */
  .story__copy h2 { margin-inline: auto; }
  .pillar { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .value > svg { display: block; margin-inline: auto; }
  .contact__copy h2,
  .contact__copy > p { margin-inline: auto; }
  /* Centre the group but keep the icons lined up in one column. */
  .contact__lines { width: max-content; max-width: 100%; margin-inline: auto; }
  .contact-form .btn { align-self: stretch; }

  /* ================= BECOME A PANDIT ================= */
  .pandit-hero__copy h1,
  .pandit-hero__copy > p { margin-inline: auto; }
  .pandit-hero__actions { justify-content: center; }
  .stat-tile { text-align: center; }
  .stat-tile svg { display: block; margin-inline: auto; }

  .payout__copy h2,
  .payout__copy > p { margin-inline: auto; }
  .payout__step { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .payout__step-head { justify-content: center; }
  .payout__step p { margin-inline: auto; }

  .apply__main > h2 { margin-inline: auto; }
  .apply-form__submit { flex-direction: column; justify-content: center; text-align: center; }
  .apply-form__submit .btn { align-self: stretch; }
  .apply-form__submit p { margin-inline: auto; }
  .apply-success { text-align: center; }
  .apply-success__mark { margin-inline: auto; }
  .apply-success p { margin-inline: auto; }

  .apply__aside { max-width: none; }
  .aside-card { text-align: center; }
  .aside-card .field { text-align: left; }
  .criteria span,
  .after-list > div { flex-direction: column; align-items: center; gap: 4px; }
  .after-list__n { padding-top: 0; }

  .pandit-closing { justify-content: center; }
  .pandit-closing__copy h2,
  .pandit-closing__copy p { margin-inline: auto; }

  /* ================= 404 ================= */
  .notfound__search .btn { flex: 1 1 100%; }
  .notfound__links { text-align: center; }
  .notfound__link > span:not(.notfound__icon) { flex: 1 1 auto; min-width: 0; }
}