/* apps.gravitatech.com landing page. Builds on site.css and live-tile.css (copied from the demo site, which copied them
   from gravitatech.com), so the two subdomains look like one family. This file holds what the demo's demo.css holds for the
   gallery view, set for six tiles: a short title band, one grid of equal tiles, no featured app.
   Rules kept: orange only on real buttons, labels at least 14 px, no pills or emoji as icons. */

html.i18n-pending body{visibility:hidden}

/* short title band: the heading and WhatsApp on navy, so the tiles start on the first screen */
.demo-band{background:#0C1844;color:#fff;padding-block:var(--s3)}
.demo-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.demo-band h1{color:#fff;margin:0;font-size:clamp(2rem,1.2rem + 2.2vw,2.75rem);line-height:1.1}

/* gallery */
.demo-gallery{padding-block:var(--s3) var(--s5)}
.demo-gallery > .wrap{gap:0}

/* one grid of six equal tiles: 3 a row, 2 rows; one tile per row, picture beside the text, on phones */
.g-grid{list-style:none;margin:0;padding:0;display:grid}
.g-grid.g-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.g-card .g-shot{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line);position:relative}
.g-card .g-shot picture{display:block;width:100%;height:100%}
.g-card .g-shot img{position:absolute;inset:0}
.g-card .g-shot img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.g-card .g-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:var(--s2) var(--s3);flex:1 1 auto}
.g-card .demo-name{font-size:var(--fs-2);font-weight:700;line-height:1.2;color:var(--text)}
.g-card .app-line{font-size:var(--fs-0);line-height:1.45;color:var(--muted)}

/* "Coming Soon", the demo gallery's label */
.demo-status{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--s1);font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.demo-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* the tile text stays muted inside a live tile (site.css would turn link text blue on hover) */
main ul.g-grid > li.g-card > a.g-card-link .app-line{color:var(--muted)}
main ul.g-grid > li.g-card > a.g-card-link .demo-name{color:var(--text)}

/* footer: the demo site's footer, with the menu links in two columns so it stays short */
.site-footer{padding-block:var(--s5) var(--s3)}
.site-footer .cols{grid-template-columns:1fr 1fr;gap:var(--s4)}
.site-footer .cols > .stack:last-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
.site-footer .legal{margin-top:var(--s3)}
.site-footer .legal .lang-foot{white-space:nowrap}
@media (max-width:600px){
  .site-footer .cols{grid-template-columns:1fr}
}

/* tablet: three a row still fits down to 761 px; the header switches to the menu button at 960 px
   (the full menu needs about 940 px in English and 840 px in Indonesian), as on the demo site */
@media (max-width:960px){
  .menu-toggle{display:grid}
  .nav{position:fixed;inset:84px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s3) max(var(--s3),env(safe-area-inset-left,0px));display:none}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav ul a[aria-current="page"]{border-bottom-color:var(--line);color:var(--accent-text)}
  .lang{align-self:flex-start}
  .g-grid.g-gallery{gap:var(--s2)}
  .g-card .g-body{padding:var(--s2)}
  .g-card .demo-name{font-size:1.25rem}
}

/* phone: one tile per row, the picture on the left and the text on the right, so all six sit in a short page */
@media (max-width:760px){
  .demo-band{padding-block:var(--s2)}
  .demo-band h1{font-size:1.625rem}
  .demo-band .btn{min-height:44px;padding:0 18px;font-size:var(--fs-0)}
  .demo-gallery{padding-block:var(--s2) var(--s4)}
  .g-grid.g-gallery{grid-template-columns:minmax(0,1fr);gap:12px}
  .g-card,
  main ul.g-grid.g-gallery > li.g-card > a.g-card-link{flex-direction:row}
  .g-card.is-live{display:flex}
  main ul.g-grid.g-gallery > li.g-card > a.g-card-link{align-items:stretch}
  /* the picture keeps its own 16:10 (nothing cropped at the sides): a small rounded thumbnail beside the text */
  .g-card .g-shot{flex:0 0 42%;align-self:center;aspect-ratio:16/10;margin:12px 0 12px 12px;border:1px solid var(--line);border-radius:10px}
  .g-card .g-body{justify-content:center;padding:12px 14px 12px 14px;gap:3px}
  .g-card .demo-name{font-size:1.125rem}
  .g-card .demo-status{margin-top:4px;padding-top:0}
}