/* The main page: the web clock alone, exactly one screen (dynamic viewport height, so phone toolbars never cause a
   scroll). The dial and the small footer share the bottom row, so they can never overlap; on narrow phones the
   footer moves under the dial, in the same corner. */
.v1 { overflow: hidden; }
.hero.clock { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.hero.clock .bottom-row { display: grid; grid-template-columns: minmax(0, 680px) minmax(min(440px, 45%), 1fr); align-items: end; gap: 12px 48px; }
.hero.clock .bottom-row .dial-wrap { min-width: 0; }

/* Narrow screens: the footer under the dial, still small and in the same corner. */
@media (max-width: 860px) {
  .hero.clock .bottom-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Shorter screens give back space from the top down, so everything still fits without a scroll. */
@media (max-height: 820px) {
  .hero.clock .intro { padding-top: 4px; }
  .hero.clock .moment { padding-top: 12px; }
  .hero.clock .hint { display: none; }
}
@media (max-width: 720px) and (max-height: 780px) {
  .hero.clock h1 { font-size: 30px; }
  .hero.clock .lede { font-size: 16px; margin-top: 8px; }
  .hero.clock .intro .get { margin-top: 14px; }
  .hero.clock .big { font-size: clamp(64px, 20vw, 92px); margin-bottom: 6px; }
  .hero.clock .dial { margin-top: 6px; }
}
@media (max-width: 720px) and (max-height: 680px) {
  .hero.clock .lede { display: none; }
  .hero.clock .top { height: 52px; }
}
@media (min-width: 721px) and (max-height: 700px) {
  .hero.clock .lede { display: none; }
  .hero.clock .big { font-size: clamp(72px, 16vh, 140px); }
}
/* Desktop: a little less air above the headline, so taller Arabic lines fit too. */
@media (min-width: 721px) and (min-height: 821px) { .hero.clock .intro { padding-top: clamp(8px, 5.5vh, 80px); } }
/* The smallest phones (320 × 568): the essentials only, still one screen. */
@media (max-width: 720px) and (max-height: 600px) {
  .hero.clock .top { height: 44px; }
  .hero.clock h1 { font-size: 24px; }
  .hero.clock .intro .get { margin-top: 10px; gap: 6px 12px; }
  .hero.clock .badge img { height: 40px; }
  .hero.clock .soon-note { font-size: 13px; }
  .hero.clock .moment { padding-top: 6px; }
  .hero.clock .caption, .hero.clock .where { font-size: 15px; }
  .hero.clock .big { font-size: 56px; margin-bottom: 2px; }
  .hero.clock .dial { margin-top: 0; }
  .corner { gap: 1px; }
  .corner .r1 { font-size: 11px; }
  .corner .r2 { font-size: 10.5px; }
  .corner .r3 { font-size: 9.5px; margin-top: 1px; }
}
/* Phones: the Arabic headline breaks into two lines as the English one does, so the sun and moon have open sky
   beside it (js/page.js keeps them there, clear of the headline and the countdown). */
@media (max-width: 720px) { [dir="rtl"] .hero.clock h1 { max-width: 8em; text-wrap: balance; } }