/* home-grid.css — grelha de entrada da Home (a zona de scroll). Estudos HG004, HG007, HG010–HG012.
   O HG001 (baseline) continua o feed misto original e não usa nada deste ficheiro.
   Objetivo: visualização passiva com informação útil — lê-se sem tocar. */

/* SEM SCROLL do utilizador na Home: a zona (.home-cards, overflow hidden na baseline) não
   faz scroll ao toque e nunca mostra cards cortados. O fluxo ocupa a altura exata da zona;
   o topo fica livre da pílula de pesquisa/contexto (--hg-safe-top, medido em mount()). */
.home-root .home-cards[class*="home-cards--HG"] { overflow: hidden; }
.home-root .home-cards[class*="home-cards--HG"] .card-scroller { height: 100%; transform: none; }
.homegrid-flow { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 14px;
  padding: var(--hg-safe-top, 72px) 14px 14px; }
.homegrid-flow > * { flex: none; }
/* altura toda (como o HG001): a pílula pousa sobre a banda de IMAGEM do 1.º card; o texto
   começa sempre abaixo dela (--hg-pill-over é medido em mount()) */
.homegrid-flow--top { padding-top: 14px; --hg-band: max(104px, calc(var(--hg-pill-over, 43px) + 34px)); }

/* paginador automático (HG004, HG007, HG013): avança por blocos inteiros; o que não cabe
   todo fica invisível */
.homegrid-flow > .hg-pager { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
.hg-pager__track { display: flex; flex-direction: column; gap: 14px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hg-pager__track > * { flex: none; transition: opacity .35s ease; }
.hg-pager__track > .is-out { opacity: 0; pointer-events: none; }

/* ================= HG004 · secções curadas ================= */
.homegrid-block { display: flex; flex-direction: column; gap: 12px; }
.homegrid-block__head { margin: 0 2px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted, #6b6f74); }
.homegrid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.homegrid-cards .card { min-height: 0; --card-media-h: 150px; }
.homegrid-card__why { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ds-muted, #6b6f74); }

/* ================= HG007 · grelha assimétrica ================= */
.hg-grid { display: grid; gap: 14px; }
.hg-grid--asym { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hg-grid--asym > .hg-card--overlay { grid-column: 1 / -1; }
.hg-pager__track > .hg-card--overlay { min-height: 300px; }
.hg-row .hg-card__phrase { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-card { overflow: hidden; }
.hg-card__phrase { margin: 0; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: 34px; line-height: 1.02; text-transform: uppercase; color: #111; }
.hg-card__data { margin: 0; font-size: 17px; font-weight: 600; color: #5a5f64; }
.hg-card--img { min-height: 0; }
.hg-card--img .card__media { height: 176px; }
.hg-card--img .card__body { gap: 8px; }
.hg-card--overlay { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.hg-card__bg { position: absolute; inset: 0; overflow: hidden; background: #222; }
/* o placeholder semântico (.kiosk [data-ph]) punha o fundo em position: relative e
   com altura 0 — o destaque do HG007 aparecia vazio */
.kiosk .hg-card--overlay .hg-card__bg { position: absolute; inset: 0; height: auto; }
.hg-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.hg-card__over { position: relative; width: 100%; padding: 26px 28px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.82) 100%); }
.hg-card--overlay .hg-card__phrase { color: #fff; }
.hg-card--overlay .hg-card__data { color: rgba(255,255,255,.92); }
.hg-card__over small { color: rgba(255,255,255,.85); }

/* ================= HG010–HG013 · sistema partilhado =================
   Mesma HIERARQUIA do HG001 (a versão atual): card branco com o raio e a sombra do .card,
   título a --ds-home-title (28 px, Barlow 700, frase normal), metadados a --ds-home-meta
   (18 px), etiqueta pequena. O destaque sobe 1,25× (como o card em destaque das listagens).
   Os valores curtos ("3 min", "2 – 1") fazem de título e são o único texto em maiúsculas
   grandes. A cor é de CARD, não de botão: tom suave (--acc-soft) só no destaque; a cor plena
   (--acc) só no círculo do ícone, na etiqueta e no ponto "agora". */
.homegrid-flow { --hg-title: var(--ds-home-title, 28px); --hg-meta: var(--ds-home-meta, 18px); --hg-value: 40px; }
.hg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 4px; color: #111; }
.hg-head b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; }
.hg-head span { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-head em { font-style: normal; font-weight: 500; opacity: .7; }
.hg-demo { display: flex; align-items: center; gap: 8px; margin: -4px 4px 0; font-size: 14px; line-height: 1; color: #111; opacity: .7; }
.hg-demo .tomi-icon { font-size: 16px; }
/* círculo do ícone: o único sítio com a cor plena do contexto */
.hg-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); line-height: 0; }
.hg-ic .tomi-icon { font-size: 22px; }
/* superfícies */
.hg-fact, .hg-story, .hg-tl__card, .hg-spot__card { background: var(--ds-surface, #fff); color: #111;
  border-radius: var(--ds-card-radius, 12px); box-shadow: var(--ds-shadow-card); }
.hg-fact--lead, .hg-tl__item.is-now .hg-tl__card { background: var(--acc-soft); color: var(--acc-soft-ink); }
/* etiqueta (papel da pílula de categoria do HG001) */
.hg-fact__label small, .hg-story__ch small, .hg-spot__top small { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* imagem (estímulo fotográfico genérico): foto local ou placeholder no tom do contexto */
.hg-media { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, var(--acc-soft), var(--acc)); color: var(--acc-ink); }
.hg-media > i { position: absolute; inset: 0; display: grid; place-items: center; opacity: .32; line-height: 0; }
.hg-media > i .tomi-icon { font-size: 64px; }
.hg-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg-media--band { flex: none; height: var(--hg-band); margin: 0; }
.hg-media--band > i .tomi-icon { font-size: 80px; }
.hg-media--side { flex: 0 0 38%; align-self: stretch; }
.hg-media--thumb { flex: none; width: 76px; height: 76px; margin-left: auto; border-radius: 10px; }
.hg-media--thumb > i .tomi-icon { font-size: 34px; }
.hg-media--fill { position: absolute; inset: 0; }
.hg-demo b { font-weight: 800; }

/* barra de DESTAQUES (HG010–HG013): 2 cards de cada vez, rodam sozinhos (hora + contexto).
   Mesma hierarquia do card do HG001: imagem, etiqueta, título a 24–28 px, razão a 16–18 px. */
.hg-strip { flex: none; display: flex; flex-direction: column; gap: 8px; }
.hg-strip__head, .homegrid-flow > .hg-strip__head { margin: 0 4px; font-size: 15px; line-height: 1; color: #111; }
.hg-strip__head b { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.hg-strip__pages { position: relative; height: 236px; }
.hg-strip__page { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-card-gap, 14px);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.hg-strip__page.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* perfil único dos cards de destaque (barra do HG010–HG012 e grelha de baixo do HG013) */
.hg-hl.hg-card--img { height: 100%; min-height: 0; }
.hg-hl .card__media { height: auto; flex: 1 1 auto; min-height: 96px; }
.hg-hl .card__body { flex: none; padding: 12px 18px 14px; gap: 6px; }
.hg-hl .hg-card__phrase { font-family: var(--ds-font-sans); font-size: 24px; line-height: 1.15; text-transform: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-hl .hg-card__data { font-size: 16px; }
.hg-hl .hg-media > i .tomi-icon { font-size: 56px; }

/* ================= HG010 · Agora aqui (painel de estado) ================= */
.homegrid-flow > .hg-facts { flex: 1 1 auto; min-height: 0; }
.hg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.45fr 1fr; gap: var(--ds-card-gap, 14px); }
.hg-fact { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; text-align: left; }
.hg-fact__body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 16px; }
.hg-fact--side { flex-direction: row; }
.hg-fact--lead, .hg-facts > .hg-fact:nth-child(even):last-child { grid-column: 1 / -1; }
.hg-fact__label { display: flex; align-items: center; gap: 10px; }
.hg-fact__value { margin-top: auto; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: var(--hg-value); line-height: 1; text-transform: uppercase; }
.hg-fact--lead .hg-fact__value { font-size: calc(var(--hg-value) * 1.25); }
.hg-fact__detail { margin: 0; font-size: var(--hg-meta); line-height: 1.25; font-weight: 500; }
/* mini-quadro de partidas (cidade, Road Station) */
.hg-board { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; }
.hg-board li { display: grid; grid-template-columns: 96px 1fr auto; align-items: baseline; gap: 16px; padding: 3px 0;
  border-top: 1px solid rgba(0,0,0,.14); }
.hg-board li:first-child { border-top: 0; }
.hg-board b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 28px; line-height: 1; }
.hg-board span { font-size: var(--hg-title); font-weight: 700; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-board em { font-style: normal; font-size: var(--hg-meta); font-weight: 600; }

/* ================= HG011 · Stories (grelha rotativa) ================= */
.homegrid-flow > .hg-stories { flex: 1 1 auto; min-height: 0; }
.hg-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 196px; gap: var(--ds-card-gap, 14px); }
.hg-story { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.hg-story__body { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 18px; }
.hg-story--lead { grid-column: 1 / -1; }
.hg-story--lead .hg-story__body { padding: 12px 24px 18px; }
.hg-story--side { flex-direction: row; }
.hg-story__segs { position: relative; z-index: 1; display: flex; gap: 6px; }
.hg-story__segs i { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.14); }
.hg-story__segs i span { display: block; height: 100%; background: #111; transform-origin: left; transform: scaleX(0); }
.hg-story__segs i.is-done span { transform: none; }
.hg-story__segs i.is-on span { animation: hg-fill var(--hg-dur, 8s) linear both; }
@keyframes hg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hg-story__ch { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
/* progresso do destaque · anel à volta do círculo do ícone (default) */
.hg-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.hg-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hg-ring circle { fill: none; stroke: #111; stroke-width: 2.6; }
.hg-ring__track { opacity: .14; }
.hg-ring__fill { stroke-linecap: round; stroke-dashoffset: 131.95; }
.hg-ring__fill.is-run { animation: hg-ring var(--hg-dur, 8s) linear both; }
@keyframes hg-ring { from { stroke-dashoffset: 131.95; } to { stroke-dashoffset: 0; } }
.hg-ring .hg-ic { width: 38px; height: 38px; }
.hg-story__count { margin-left: auto; font-style: normal; font-size: 15px; font-weight: 800; letter-spacing: .06em; opacity: .75; }
.hg-story__frames { position: relative; flex: 1; }
.hg-story__frame { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; cursor: pointer; }
.hg-story__frame.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hg-story__frame b { font-size: var(--hg-title); font-weight: var(--ds-fw-bold, 700); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-story--lead .hg-story__frame b { font-size: calc(var(--hg-title) * 1.25); }
.hg-story__frame p { margin: 0; font-size: var(--hg-meta); line-height: 1.25; font-weight: 500; }

/* ================= HG012 · O dia aqui (linha do tempo) ================= */
.homegrid-flow > .hg-tl { flex: 1 1 auto; min-height: 0; }
.hg-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.hg-tl::before { content: ""; position: absolute; left: 119px; top: 20px; bottom: 20px; width: 2px; background: #111; opacity: .14; }
.hg-tl__item { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 94px 24px 1fr; align-items: center; gap: 14px; text-align: left; }
.hg-tl__item.is-now { flex-grow: 2.3; }
.hg-tl__item > .hg-tl__card { align-self: stretch; }
.hg-tl__when { display: flex; flex-direction: column; align-items: flex-end; color: #111; }
.hg-tl__when b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 26px; line-height: 1; text-transform: uppercase; }
.hg-tl__when small { font-size: 14px; font-weight: 600; opacity: .8; }
.hg-tl__dot { position: relative; z-index: 1; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.45); }
.hg-tl__item.is-now .hg-tl__dot { width: 20px; height: 20px; border: 0; background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.hg-tl__card { display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; padding: 0; min-width: 0; }
.hg-tl__row { flex: 1; min-height: 0; display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 20px; }
.hg-tl__item.is-now .hg-tl__row { padding: 10px 20px; }
.hg-tl__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hg-tl__txt b { font-size: 24px; line-height: 1.15; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-tl__item.is-now .hg-tl__txt b { font-size: var(--hg-title); }
.hg-tl__txt small { font-size: 17px; line-height: 1.2; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-tl__item.is-now .hg-tl__txt small { font-size: var(--hg-meta); }

/* ================= HG013 · Destaque de contexto (variação do HG007) =================
   Faixa baixa do contexto: tom suave + etiqueta na cor do contexto (a sugestão cromática);
   3 cards brancos lado a lado; por baixo, 4 cards de conteúdo com a hierarquia do HG001. */
.hg-spot { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: calc(var(--ds-card-radius, 12px) + 6px); background: var(--acc-soft); }
.hg-spot__band { position: relative; height: var(--hg-band); border-radius: var(--ds-card-radius, 12px); overflow: hidden; }
.hg-spot__band .hg-spot__tag { position: absolute; left: 10px; bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.hg-spot__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 6px 16px 6px 10px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); }
.hg-spot__tag .tomi-icon { font-size: 22px; }
.hg-spot__tag b { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hg-spot__tag span { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-spot__grid { display: grid; gap: 12px; grid-template-columns: 1.3fr 1fr 1fr; }
.hg-spot__card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; text-align: left; overflow: hidden; }
.hg-spot__top { display: flex; align-items: center; gap: 8px; }
.hg-spot__top .hg-ic { width: 34px; height: 34px; } .hg-spot__top .hg-ic .tomi-icon { font-size: 19px; }
.hg-spot__go { margin-left: auto; line-height: 0; opacity: .6; } .hg-spot__go .tomi-icon { font-size: 20px; }
.hg-spot__value { margin-top: 6px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: var(--hg-value); line-height: 1; text-transform: uppercase; }
.hg-spot__detail { font-style: normal; font-size: 16px; line-height: 1.2; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homegrid-flow--HG013 .hg-pager__track { gap: 12px; }
.homegrid-flow--HG013 .hg-row { gap: 12px; }


/* HG011 · destaque: foto macro do contexto na banda (sem gradiente) com um véu leve no tom do contexto */
.hg-media--photo { background: var(--acc); }
.hg-media--photo > img { opacity: .9; }
/* HG011 · 2.ª linha: estrutura dos cards da barra de destaques (etiqueta, título 24 px, razão
   16 px), sem imagem e por isso mais baixa */
.hg-story--plain .hg-story__body { padding: 12px 18px 14px; gap: 4px; }
.hg-story--plain .hg-story__ch small { font-size: 12px; opacity: .7; }
.hg-story--plain .hg-story__frame b { font-size: 24px; }
.hg-story--plain .hg-story__frame p { font-size: 16px; font-weight: 600; color: var(--ds-muted, #5a5f64); }
/* a foto do destaque ocupa o espaço livre do card; o texto fica compacto por baixo */
.hg-story--lead > .hg-media--band { flex: 1 1 auto; min-height: var(--hg-band); height: auto; }
.hg-story--lead > .hg-story__body { flex: none; gap: 8px; padding-top: 12px; padding-bottom: 16px; }
/* texto do destaque logo a seguir ao anel: a área dos quadros tem a altura do texto (1 linha
   de título no card largo + razão), sem espaço morto entre o progresso e a informação */
.hg-story--lead .hg-story__frames { flex: none; height: calc(var(--hg-title) * 1.25 * 1.15 + 36px); }
.hg-story--lead .hg-story__frame b { -webkit-line-clamp: 1; }
.hg-story--lead .hg-story__frame { justify-content: flex-start; }

/* ================= HG014 · Stories com a 2.ª linha no tom do contexto =================
    Variação do HG011: a 2.ª linha (os 2 cards "plain") fica mais visual e no tom do
    contexto ativo — cada um ganha uma faixa de imagem no topo (gradiente do contexto +
    ícone; <ícone>.jpg cobre-a quando existir) e o corpo em tom suave (--acc-soft).
    A linha de baixo sobe a 222 px para dar lugar à faixa (96 px), mantendo os frames
    legíveis e sem overflow do destaque. Resto igual ao HG011. */
.homegrid-flow--HG014 .hg-stories { grid-template-rows: minmax(0, 1fr) 222px; }
.hg-story--visual { background: var(--acc-soft); color: var(--acc-soft-ink); }
.hg-story--visual > .hg-media--band { height: 96px; }
.hg-story--visual .hg-story__ch small { color: var(--acc-soft-ink); }
.hg-story--visual .hg-story__frame p { color: var(--acc-soft-ink); opacity: .85; }

/* HG013 · os 3 cards do contexto rodam por conjuntos; barra segmentada no fundo da banda da foto */
.hg-spot__pages { display: grid; }
.hg-spot__pages > .hg-spot__grid { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.hg-spot__pages > .hg-spot__grid.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hg-spot__segs { position: absolute; right: 14px; bottom: 22px; display: flex; gap: 6px; width: 34%; }
.hg-spot__segs i { flex: 1; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.45); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.hg-spot__segs i span { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.hg-spot__segs i.is-done span { transform: none; }
.hg-spot__segs i.is-on span { animation: hg-fill var(--hg-dur, 8s) linear both; }