/* EduPremium: phone and tablet refinements on top of the designed pages (which are already fluid).
   Desktop is untouched: every rule here sits behind a width, pointer or hover media query. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [data-on-click] { -webkit-tap-highlight-color: transparent; }

/* ── Touch screens: comfortable tap areas without moving the layout ───────── */
@media (pointer: coarse) {
  /* Plain text links ("Explore Technology →", footer links): an invisible 44px hit area. */
  section a:not([style*="padding"]):not([style*="position"]),
  footer a:not([style*="padding"]):not([style*="position"]) { position: relative; }
  section a:not([style*="padding"]):not([style*="position"])::after,
  footer a:not([style*="padding"]):not([style*="position"])::after { content: ""; position: absolute; inset: -12px -6px; }
  /* Header controls */
  header [data-burger], [data-ep-lang] button, [data-ep-lang] select { min-height: 44px; min-width: 44px; }
  footer [data-ep-social] a { width: 44px !important; height: 44px !important; }
  /* Pressing a button gives a small, quick response. */
  button, a[style*="padding:18px"], a[style*="padding:17px"], a[style*="padding:16px"] { transition: transform .12s ease, background-color .25s, color .25s, border-color .25s; }
  button:active, a[style*="padding:18px"]:active, a[style*="padding:17px"]:active, a[style*="padding:16px"]:active { transform: scale(.985); }
}

/* ── Phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Inputs at 16px after the page's 0.9 zoom, so iOS never zooms in when a field is tapped. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 17.8px !important; }

  /* Headings and blocks reveal as soon as they are on screen (short phone viewports never reach the desktop range). */
  @media (prefers-reduced-motion: no-preference) {
    section h2, section h3, [data-reveal] { animation-range: entry 0% entry 85% !important; }
  }

  /* Footer: brand on top, then the three link lists in two tidy columns. */
  footer > div:nth-of-type(3) { grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; }
  footer > div:nth-of-type(3) > div:first-child { grid-column: 1 / -1; min-width: 0 !important; }
  footer > div:nth-of-type(3) > div:not(:first-child) { gap: 16px !important; }
  footer > div:nth-of-type(3) > div:last-child { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 20px !important; }
  footer > div:nth-of-type(3) > div:last-child > div:first-child { grid-column: 1 / -1; }
  footer > div:nth-of-type(4) [style*="flex-wrap:wrap;gap:16px"] { gap: 22px !important; }
  footer form button[type=submit] { flex: 1 1 100% !important; padding: 18px 26px !important; }

  /* Mobile menu: the page underneath stays put; the button shows it's open. */
  html.ep-nav-open, html.ep-nav-open body { overflow: hidden !important; }
  html.ep-nav-open [data-burger] { background: #121210 !important; color: #FBFBF8 !important; border-color: #121210 !important; }
  /* The open menu fills the screen below the header (edges, not vh units: the page runs at zoom .9 on phones). */
  html.ep-nav-open header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #FBFBF8 !important; }
  html body [data-mnav] { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; max-height: none !important; padding-bottom: env(safe-area-inset-bottom) !important; }
  [data-mnav] > a { min-height: 48px; display: flex !important; align-items: center; }
  html body [data-mnav] > div[style*="position:sticky"] { animation: none !important; }

  /* "Ask EduPremium": a full-width sheet from the bottom. */
  html body [data-ep-ai] > div { position: fixed !important; left: 0 !important; right: 0 !important; top: 9% !important; bottom: 0 !important; width: auto !important; height: auto !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom); animation: ep-sheet .38s cubic-bezier(.16, .8, .24, 1) both !important; }
  html.ep-ai-open body [data-ep-ai] > button { display: none !important; }
  html.ep-ai-open body::before { content: ""; position: fixed; inset: 0; z-index: 79; background: rgba(18, 18, 16, .55); animation: ep-fade-in .3s ease both; }
  html.ep-ai-open, html.ep-ai-open body { overflow: hidden !important; }
  [data-ep-ai] > div > div:first-child { padding: 18px 18px !important; }
  [data-ep-ai] > div > div:first-child button { width: 44px; height: 44px; font-size: 26px !important; }
  [data-ep-ai] > div > div:last-child { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important; }
  [data-ep-ai] > div > div:last-child input { padding: 14px !important; }
  [data-ep-ai] > div > div:last-child button { padding: 14px 18px !important; }

  /* Demo booking: a full-height sheet instead of a floating box. */
  [data-ep-demo] { padding: 0 !important; align-items: flex-end !important; }
  [data-ep-demo] > div { width: 100% !important; max-height: 94% !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom); animation: ep-sheet .4s cubic-bezier(.16, .8, .24, 1) both !important; }
  [data-ep-demo] form > label { grid-column: 1 / -1 !important; }
  [data-ep-demo] form button[type=submit] { width: 100%; }
  html.ep-modal-open, html.ep-modal-open body { overflow: hidden !important; }

  /* Reader panel (posts and job details opened from lists) */
  #ep-read .pn { padding: 18px 18px calc(28px + env(safe-area-inset-bottom)) !important; }
  #ep-read .x { position: sticky; top: 0; z-index: 2; }

  /* Floating buttons clear the iPhone home indicator. */
  [data-ep-ai] { bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  #ep-top { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  [data-ep-scope=tour] > [data-if] { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}

/* ── Tablets (portrait and landscape) ─────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1180px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  [data-mnav] { max-height: min(calc(100dvh - 76px), 720px) !important; }
  html.ep-nav-open, html.ep-nav-open body { overflow: hidden !important; }
  html.ep-nav-open [data-burger] { background: #121210 !important; color: #FBFBF8 !important; border-color: #121210 !important; }
  [data-mnav]:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  [data-mnav] > div[style*="letter-spacing:.22em"], [data-mnav] > div[style*="position:sticky"] { grid-column: 1 / -1; }
}

@keyframes ep-fade-in { from { opacity: 0; } }
@keyframes ep-sheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-ep-ai] > div, [data-ep-demo] > div { animation: none !important; } }