/* ==========================================================
   HALA — phone layer
   Card groups that would otherwise stack into a very long page
   become sideways swipe rows below 640px. The rows are marked up
   by hala-mobile.js; with JS off the page stays exactly as it was.
   ========================================================== */

@media (max-width:640px){

  .hala-row{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:84% !important;
    grid-template-columns:none !important;
    grid-template-rows:auto !important;
    gap:12px !important;
    align-items:stretch !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:16px;
    padding:4px 16px 10px !important;
    margin-inline:-16px !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hala-row::-webkit-scrollbar{display:none;}
  .hala-row > *{
    scroll-snap-align:start;
    min-width:0;
    margin:0 !important;
  }

  /* groups that drew their dividers with a 1px gap over a tinted
     background need real borders back once they are separate cards */
  .hala-row[data-hairline]{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }
  .hala-row[data-hairline] > *{
    border:1px solid var(--line, #e7dfd8);
    border-radius:var(--radius, 18px);
    background:var(--card, #fff);
  }

  /* short tiles keep their original styling, just two to a row */
  .hala-duo{grid-template-columns:repeat(2,1fr) !important;}

  /* affordance: say it once per page, then show position */
  .hala-hint{
    display:flex; align-items:center; gap:6px; justify-content:flex-end;
    margin:12px 2px 0; font-size:.78rem; color:var(--muted, #857a7c);
  }
  .hala-hint svg{animation:hala-nudge 1.6s ease-in-out infinite;}
  @keyframes hala-nudge{0%,100%{transform:translateX(0);} 50%{transform:translateX(-5px);}}

  .hala-dots{display:flex; gap:6px; justify-content:center; margin-top:12px;}
  .hala-dots i{
    width:6px; height:6px; border-radius:50%; background:var(--line, #e7dfd8);
    transition:width .3s ease, background .3s ease; cursor:pointer;
  }
  .hala-dots i.on{width:18px; background:var(--gold, #c9971f);}

  /* the footer's link columns fit two-up; the brand block keeps the full width */
  .foot-grid, .foot-cols{grid-template-columns:repeat(2,1fr) !important; gap:26px 18px !important;}
  .foot-grid > *:first-child, .foot-cols > *:first-child{grid-column:1 / -1;}

  /* the english lockup line was rendering at 7.7px on phones */
  .brand .en, .brand-text span{font-size:max(9.5px, .72em) !important;}
}

@media (prefers-reduced-motion:reduce){
  .hala-hint svg{animation:none;}
}