/*
 * Small screens, landscape phones and tablets, for every page (loaded after all other Avaz styles).
 * The ported mockup reflows its columns but keeps desktop type and spacing; this scales them.
 */

/* ---------- Tablets (portrait and small laptops) ---------- */
@media (max-width: 1080px) {
  .pillars4 { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .hub { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  section.block { padding-block: 64px; }
  .page-hero { padding-block: 48px 40px; }
  .sec-head p { font-size: 18px; }
  .feature p { font-size: 17px; }
  .demo-page { gap: 36px; }
}

/* ---------- Phones (portrait) ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }

  /* Notice strip: one or two short lines, not three */
  .notice { font-size: 13px; line-height: 1.4; }
  .notice .wrap { gap: 2px 10px; padding-block: 8px; }

  header.site .wrap { gap: 12px; padding-block: 10px; }

  /* Type */
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .page-hero h1, .art-head h1 { font-size: clamp(32px, 9vw, 40px); max-width: none; }
  .hero .lede, .page-hero .lede { font-size: 18px; margin-top: 14px; }
  .sec-head h2 { font-size: clamp(28px, 8vw, 34px); }
  .sec-head p { font-size: 17px; margin-top: 12px; }
  .feature h3 { font-size: 24px; }
  .feature p { font-size: 17px; margin-top: 12px; }
  .h2, .prose h2 { font-size: 26px; }
  .prose { font-size: 17px; line-height: 1.7; }
  .prose > p:first-of-type { font-size: 19px; }
  .kicker { font-size: 12px; }

  /* Spacing */
  .hero { padding-block: 32px 48px; }
  .hero .wrap { gap: 32px; }
  .page-hero { padding-block: 36px 32px; }
  section.block { padding-block: 48px; }
  section.block.pt-64 { padding-top: 40px; }
  .sec-head { margin-bottom: 8px; }
  .feature + .feature { margin-top: 44px; }
  .feature { gap: 20px; }
  .story .wrap { padding-block: 48px; gap: 28px; }
  .bgrid { margin-top: 32px; gap: 28px; }
  .two-col.gap-48 { gap: 36px; }
  .demo-page { gap: 28px; }
  .form-card { padding: 22px; border-radius: 20px; }
  .panel { padding: 22px; }
  .pill4 { padding: 20px; }

  /* Buttons: a thumb-sized, full-width main action */
  .page-hero .actions, .hero .actions { flex-direction: column; align-items: stretch; margin-top: 24px; }
  .page-hero .actions .btn, .hero .actions .btn, .page-hero .actions .wp-block-button, .hero .actions .wp-block-button { width: 100%; }
  .page-hero .actions .wp-block-button__link, .hero .actions .wp-block-button__link { display: flex; justify-content: center; width: 100%; }
  .btn { white-space: normal; text-align: center; }

  /* Grids to one column */
  .pillars4, .pillars4.two, .people, .hub, .contact-hero .people { grid-template-columns: 1fr; }
  .aud { min-height: 320px; }

  /* Images keep a sensible height */
  .feature .media img { max-height: 320px; object-fit: cover; }
  .hero-photo { padding: 18px 18px 0 0; }
  .hero-photo .offset { inset: 0 0 18px 18px; }

  /* Footer */
  footer .top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  footer .bottom { flex-direction: column; gap: 8px; }
  .news { max-width: none; }

  /* Tables and wide embeds scroll inside themselves, never the page */
  .prose table, main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main iframe { max-width: 100%; }

  /* Cookie banner (CookieYes): compact strip instead of a quarter of the screen */
  #cookie-law-info-bar { font-size: 13px !important; line-height: 1.45 !important; padding: 12px 14px !important; max-width: calc(100% - 24px) !important; left: 12px !important; right: 12px !important; bottom: 12px !important; border-radius: 14px !important; box-shadow: 0 10px 30px -10px rgba(32,32,48,.4) !important; }
  #cookie-law-info-bar .cli-bar-container { flex-direction: column; align-items: stretch; gap: 8px; }
  #cookie-law-info-bar .cli-bar-btn_container { margin: 6px 0 0 !important; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
  #cookie-law-info-bar .cli-bar-message { margin: 0 !important; }
}

@media (max-width: 380px) {
  .wrap { padding-inline: 14px; }
  footer .top { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
}

/* ---------- Phones held sideways (short screens) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  header.site { position: relative; }            /* don't lose a third of the screen to a sticky header */
  .notice .wrap { padding-block: 6px; }
  .hero, .page-hero { padding-block: 28px 32px; }
  .hero h1 { font-size: clamp(34px, 5.5vw, 48px); }
  .page-hero h1 { font-size: clamp(30px, 5vw, 40px); }
  .hero .lede, .page-hero .lede { font-size: 17px; }
  section.block { padding-block: 44px; }
  .hero-photo { max-width: 460px; margin-inline: auto; }
  .hero-photo .frame img, .feature .media img, .art-hero img { max-height: 70vh; object-fit: cover; }
  .aud { min-height: 260px; }
  .page-hero .actions, .hero .actions { flex-direction: row; }
  #cookie-law-info-bar { max-height: 40vh; overflow: auto; }
}

/* Safe areas on notched phones (landscape) */
@supports (padding: max(0px)) {
  .wrap { padding-left: max(var(--wrap-pad, 28px), env(safe-area-inset-left)); padding-right: max(var(--wrap-pad, 28px), env(safe-area-inset-right)); }
  @media (max-width: 520px) { .wrap { --wrap-pad: 16px; } }
  @media (max-width: 380px) { .wrap { --wrap-pad: 14px; } }
}

@media (max-width: 640px) {
  .notice .wrap { display: block; text-align: center; }
  .notice .wrap > * { display: inline; }
  .notice a { margin-left: 6px; white-space: nowrap; }
  /* Staging-only badge (mu-plugin): keep it off the cookie buttons */
  #avaz-staging-badge { top: auto !important; bottom: 8px !important; left: 8px !important; right: auto !important; font-size: 10px !important; padding: 4px 7px !important; opacity: .9; }
}

/* Grid and flex children may shrink below their content, so long words, emails and
   phone numbers wrap instead of pushing the page sideways (all screen sizes). */
.two-col > *, .demo-page > *, .feature > *, .course-grid > *, .bgrid > *, .pillars4 > *, .people > *, .hub > *,
.stack > *, .experts > *, .story .wrap > *, .hero .wrap > *, .acap-grid > * { min-width: 0; }
.expert { flex-wrap: wrap; }
.expert > *:not(.av):not(img):not(.wp-block-image) { flex: 1 1 180px; min-width: 0; }
.expert, .acap-card, .pcard, .bcard, .hubcard, .pill4 { overflow-wrap: anywhere; }
.acap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .acap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .acap-grid { grid-template-columns: minmax(0, 1fr); }
  .acap-contact .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .acap-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; }
  .acap-chips::-webkit-scrollbar { display: none; }
  .acap-chip { flex: none; }
}
@media (max-width: 640px) {
  .notice.is-rotating .wrap { display: grid; text-align: center; }
  .notice.is-rotating .notice-msg { display: block; }
  .notice.is-rotating .notice-msg > * { display: inline; }
}


/* Mobile menu. It sits inside header.site, whose ".wrap" rule (flex, centred) also matched the menu and
   squeezed its groups into one centred row; this gives the menu its own layout. */
header.site .mnav .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: 4px 24px; padding-block: 8px 20px; }
header.site .mnav .wrap > div { padding: 14px 0 6px; border-top: 1px solid var(--line); }
header.site .mnav h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
header.site .mnav a { padding: 9px 0; font-size: 16px; line-height: 1.3; }
@media (max-width: 640px) {
  header.site .mnav .wrap { grid-template-columns: 1fr 1fr; }
}