/* Layout fixes for the brochure (hovatar.app/renova and the patient iPad), loaded after the site's own style.css.
   tools/sync-displays.mjs copies this to public/brochure/ipad.css and links it, so it survives a re-sync.
   The card flip fix applies everywhere; the rest is for touch tablets only (pointer:coarse, 700–1400 pt wide).
   Checked on the iPad Air (820 × 1180 pt) in both orientations, desktop WebKit (1440 × 900) and a phone (390 × 844). */

/* Each card has a cover face and an explorer face. WebKit (Safari on a Mac, iPhone and iPad) sometimes paints the face
   that's turned away, so mirrored text bleeds through; backface-visibility alone doesn't stop it. Hide that face once a
   card is at rest. Both faces stay shown for the whole 1 s flip: a face un-hidden mid-flip takes WebKit a few frames
   to draw, and the card vanished meanwhile. Each delay belongs to the state being entered: show at once, hide after. */
.cover { transition: visibility 0s; }                                       /* closing: cover back at once */
.portal .explorer { visibility: hidden; transition: visibility 0s 1s; }     /* closing: explorer after */
.active .portal.selected .explorer { visibility: visible; transition-delay: 0s; }   /* opening */
.active .portal.selected .cover { visibility: hidden; transition-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .cover, .explorer, .active .portal.selected .cover, .active .portal.selected .explorer { transition-delay: 0s; }
}

@media (pointer: coarse) and (min-width: 700px) and (max-width: 1400px) {
  /* The cart glyph's basket sits right of its box and the "+" lifts the box, so a box-centred icon looks
     off to the right and low. Nudge the glyph so what the eye sees is centred in the bubble. */
  .add-to-cart svg { translate: -1px -.5px; }
  .add-to-cart { width: 44px; height: 44px; }              /* 44 pt touch target */
  .offer h4 { font-size: 16px; }
  nav button { padding: 12px 4px; font-size: 15px; }
  .back { min-height: 44px; padding: 0 8px 0 0; font-size: 14px; }
  .cart-close { width: 44px; height: 44px; }
  /* Every control at least 44 pt (Apple's minimum). */
  .cart-remove { min-height: 44px; min-width: 64px; padding: 0 0 0 12px; font-size: 15px; }
  .membership-close { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .membership-close span { display: inline; }             /* keep "Back to wellness" in words, not just an arrow */
  .membership-plan-tab, .cart-browse { min-height: 44px; }
  .tier-topline > .add-to-cart { width: 44px; height: 44px; }

  /* Text sized for reading at arm's length: body and prices 15–16 pt, small labels at least 12 pt. */
  .eyebrow, .cover .eyebrow, .explorer-top .eyebrow, .inline-content .eyebrow, .membership-heading .eyebrow, .cart-heading .eyebrow, .cart-item .eyebrow { font-size: 12px; }
  .brand span { font-size: 12px; }
  .cover .panel-no, .panel-no-right { font-size: 13px; }
  .intro-copy, .cover-copy, .explorer-title p, .section-subtitle, .category-preview { font-size: 15px; }
  .enter { font-size: 15px; }
  .description, .inline-content .description { font-size: 16px; }
  .detail-note, .catalog-note { font-size: 15px; }
  .offer-price, .badge { font-size: 14px; }
  .tier-topline { font-size: 12px; }
  .tier-price span, .tier-terms, .membership-source { font-size: 15px; }
  .membership-tier ul { font-size: 16px; }
  .cart-item-price, .cart-summary p, .cart-total { font-size: 16px; }
}

/* Portrait: wider tiles, and an open side uses the whole width. */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 1050px) {
  .portal { width: 46%; }
  .portal.a { left: 2%; }
  .portal.w { left: 52%; }

  .active .portal.selected { left: 3%; width: 94%; }
  /* The other side has no room to peek in portrait; the nav and "Both halves" switch sides. */
  .active .portal.a:not(.selected) { left: -60%; opacity: 0; pointer-events: none; }
  .active .portal.w:not(.selected) { left: 115%; opacity: 0; pointer-events: none; }
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .membership-panel { left: 3%; width: 94%; }
  .membership-open .portal.selected { opacity: 0; pointer-events: none; }   /* no room to peek beside the panel */
  /* The site switches membership to one plan at a time with tabs below 1050 pt (meant for phones). At this
     width all three fit side by side, as in landscape. More than three plans keeps the tabs. */
  body:not(.membership-many) .membership-plan-tabs { display: none; }
  body:not(.membership-many) .membership-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
  body:not(.membership-many) .membership-tier[hidden] { display: flex; }
  body:not(.membership-many) .membership-tier { display: flex; flex-direction: column; padding: 14px 16px; }
  body:not(.membership-many) .membership-tier:first-child { padding-left: 0; }
  body:not(.membership-many) .membership-tier:last-child { padding-right: 0; }
  body:not(.membership-many) .membership-tier h3 { font-size: 30px; min-height: 0; margin: 12px 0 16px; }
}

/* Inside the patient iPad (kiosk) its help buttons sit along the bottom edge: keep the cards clear of them. */
@media (pointer: coarse) and (min-width: 1051px) and (max-width: 1400px) {
  .rl-embedded .scene { height: calc(100dvh - 330px); }
}