/* mobile.css — responsive layer for the Dalia Almendra site.
   The kit lays everything out with inline `grid-template-columns` on React
   elements, which never collapse on small screens (fixed 2-column grids get
   crushed on a phone). Inline styles beat stylesheet rules, so these overrides
   use !important to force a single-column, tap-friendly layout on mobile. */

/* Tablet + phone: collapse every inline grid to one column, tighten big gaps */
@media (max-width: 820px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gap: var(--space-7)"] { gap: var(--space-5) !important; }
  [style*="gap: var(--space-6)"] { gap: var(--space-5) !important; }
  /* stop the reversed project rows from feeling random once stacked */
  [style*="direction: row-reverse"] { flex-direction: column !important; }
}

/* Phone: let the sticky header wrap instead of overflowing, bigger tap targets */
@media (max-width: 640px) {
  header > div { flex-wrap: wrap !important; row-gap: 12px !important; }
  header [style*="display: flex"] { flex-wrap: wrap !important; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* Small phone: keep the big display type from overflowing its container */
@media (max-width: 480px) {
  h1, h2 { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 720px) { .cs-mascot { position: static !important; display: block; margin: 16px 0 0 auto; width: 120px !important; } }

/* Phone header: small logo + Menu button; nav lives in a drop-down */
@media (max-width: 720px) {
  header > div { flex-wrap: nowrap !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  header img { width: 132px !important; height: auto !important; }
  .contact-hero-logo { display: none; }
}
.m-menu { position: fixed; top: 62px; left: 0; right: 0; z-index: 30; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,0.12); display: flex; flex-direction: column; padding: 8px var(--page-margin) 18px; }
.m-menu a { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-peta); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.m-menu a.is-active { color: var(--oxblood); }
.m-menu__lang { display: flex; gap: 10px; padding-top: 14px; }
.m-menu__lang button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: none; font-family: var(--font-peta); font-size: 11px; letter-spacing: 0.16em; color: var(--ink); cursor: pointer; }
.m-menu__lang button.is-active { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
@media (max-width: 720px) { main > section:first-child, main > div:first-child { padding-top: 20px !important; } }
/* Contact page: same simple layout on every screen size */
.contact-hero-logo { display: none !important; }