/* ==========================================================================
   FASE 4A — Arquétipos visuais FLEX
   O preset define identidade (cor/fonte). O layout define composição.
   Cinematic: capa imersiva, sobreposição e cards largos.
   Editorial: capa dividida, painéis e grade contida.
   Minimal: texto primeiro, listas compactas e muito respiro.
   ========================================================================== */

.mini-app-topnav { min-width:0; overflow-x:auto; scrollbar-width:none; }
.mini-app-topnav::-webkit-scrollbar { display:none; }

/* ---------------------------------------------------------------- Cinematic */
body.mini-site[data-layout-key="cinematic"] .mini-app-hero {
  min-height:clamp(430px,68dvh,640px);
  align-items:end;
  border-block:0;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero::after {
  background:
    linear-gradient(0deg,color-mix(in srgb,var(--mini-primary) 98%,transparent) 0%,color-mix(in srgb,var(--mini-primary) 72%,transparent) 34%,transparent 72%),
    linear-gradient(90deg,color-mix(in srgb,var(--mini-primary) 86%,transparent) 0%,transparent 70%);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero img {
  filter:saturate(.9) contrast(1.1) brightness(.86);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero-copy {
  width:min(100%,620px);
  padding:clamp(34px,7vw,68px);
  padding-top:clamp(110px,18vh,190px);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero h1 {
  max-width:9.5ch;
  font-size:clamp(42px,9.6vw,82px);
  line-height:.9;
  letter-spacing:-.065em;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero-copy > div:not(.mini-app-actions) {
  max-width:34ch;
  font-size:clamp(13px,1.5vw,16px);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-hero-tabs {
  position:relative;
  z-index:3;
  width:calc(100% - 32px);
  margin:-34px auto 0;
  border:1px solid color-mix(in srgb,var(--mini-accent) 34%,transparent);
  border-radius:16px;
  background:color-mix(in srgb,var(--mini-primary) 96%,#000);
  box-shadow:0 18px 40px #0005;
  overflow:hidden;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-home > .mini-app-rail-section {
  position:relative;
  z-index:2;
  margin-top:-24px;
  padding-top:42px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mini-primary) 98%,#000) 30%);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-rail {
  grid-auto-columns:minmax(220px,76%);
  gap:14px;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-category-card {
  aspect-ratio:.86/1;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-card > img,
body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-card-fallback {
  height:clamp(180px,34vw,240px);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-category-card strong {
  font-size:clamp(18px,2.2vw,24px);
}
body.mini-site[data-layout-key="cinematic"] .mini-app-contact-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.mini-site[data-layout-key="cinematic"] .mini-app-contact-grid article:first-child {
  grid-column:1/-1;
}

/* ---------------------------------------------------------------- Editorial */
body.mini-site[data-layout-key="editorial"] .mini-app-hero {
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  min-height:clamp(390px,58dvh,570px);
  align-items:stretch;
  border-block:0;
  background:var(--mini-primary);
}
body.mini-site[data-layout-key="editorial"] .mini-app-hero::after { display:none; }
body.mini-site[data-layout-key="editorial"] .mini-app-hero-copy {
  grid-column:1;
  grid-row:1;
  align-self:center;
  width:100%;
  max-width:none;
  padding:clamp(30px,5vw,64px);
}
body.mini-site[data-layout-key="editorial"] .mini-app-hero img {
  position:relative;
  z-index:0;
  inset:auto;
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  min-height:clamp(280px,48dvh,520px);
  object-fit:cover;
}
body.mini-site[data-layout-key="editorial"] .mini-app-hero h1 {
  max-width:13ch;
  font-size:clamp(34px,5.4vw,60px);
  line-height:.97;
  letter-spacing:-.055em;
}
body.mini-site[data-layout-key="editorial"] .mini-app-hero-copy > div:not(.mini-app-actions) {
  max-width:38ch;
}
body.mini-site[data-layout-key="editorial"] .mini-app-hero-tabs {
  grid-column:1/-1;
  grid-row:2;
  background:color-mix(in srgb,var(--mini-primary) 96%,#000);
}
body.mini-site[data-layout-key="editorial"] .mini-app-home > .mini-app-rail-section {
  border-top:1px solid color-mix(in srgb,var(--mini-accent) 24%,transparent);
}
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-section-heading {
  padding-bottom:11px;
  border-bottom:1px solid color-mix(in srgb,var(--mini-accent) 26%,transparent);
}
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-rail {
  display:grid;
  grid-auto-flow:row;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-columns:auto;
  gap:16px;
  overflow:visible;
  padding-bottom:0;
}
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-category-card {
  aspect-ratio:1.28/.92;
}
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-card {
  min-height:0;
}
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-card > img,
body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-card-fallback {
  height:130px;
}
body.mini-site[data-layout-key="editorial"] .mini-app-content-card {
  grid-template-columns:1fr;
  border-radius:0;
  border-width:0 0 0 3px;
  background:transparent;
}
body.mini-site[data-layout-key="editorial"] .mini-app-content-card img {
  max-height:260px;
  min-height:0;
}
body.mini-site[data-layout-key="editorial"] .mini-app-contact-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.mini-site[data-layout-key="editorial"] .mini-app-contact-grid article {
  border-radius:0;
  border-width:1px 0 0;
  background:transparent;
}

/* ------------------------------------------------------------------ Minimal */
body.mini-site[data-layout-key="minimal"] .mini-app-header {
  min-height:66px;
  border-bottom:1px solid color-mix(in srgb,var(--mini-accent) 18%,transparent);
}
body.mini-site[data-layout-key="minimal"] .mini-app-hero {
  display:block;
  min-height:0;
  padding:clamp(30px,6vw,58px) 20px 0;
  border-block:0;
  text-align:center;
}
body.mini-site[data-layout-key="minimal"] .mini-app-hero::after { display:none; }
body.mini-site[data-layout-key="minimal"] .mini-app-hero-copy {
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding:0 0 24px;
  text-align:center;
}
body.mini-site[data-layout-key="minimal"] .mini-app-hero h1 {
  max-width:16ch;
  margin-inline:auto;
  font-size:clamp(30px,6vw,46px);
  line-height:1.02;
}
body.mini-site[data-layout-key="minimal"] .mini-app-hero-copy > div:not(.mini-app-actions) {
  max-width:42ch;
  margin-inline:auto;
}
body.mini-site[data-layout-key="minimal"] .mini-app-actions { justify-content:center; }
body.mini-site[data-layout-key="minimal"] .mini-app-hero img {
  position:relative;
  inset:auto;
  z-index:0;
  width:100%;
  height:clamp(190px,32vh,280px);
  margin-top:20px;
  border-radius:18px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-hero-tabs {
  margin-top:22px;
  border-radius:14px;
  overflow:hidden;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home {
  max-width:720px;
  margin-inline:auto;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home > .mini-app-rail-section {
  padding-top:24px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-rail {
  grid-auto-flow:row;
  grid-template-columns:1fr;
  grid-auto-columns:auto;
  gap:10px;
  overflow:visible;
  padding-bottom:0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  aspect-ratio:auto;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card::after { display:none; }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card img {
  width:58px;
  height:58px;
  border-radius:10px;
  margin:8px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card > span {
  position:static;
  padding:8px 12px 8px 0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card strong { white-space:normal; }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card small { color:color-mix(in srgb,var(--mini-text) 64%,transparent); }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  min-height:0;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card::after { display:none; }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card > img,
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card-fallback {
  width:76px;
  height:76px;
  margin:8px;
  border-radius:8px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card > div { padding:8px 12px 8px 0; }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-card p {
  -webkit-line-clamp:1;
  margin-top:2px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-content-card {
  grid-template-columns:1fr;
  border-radius:0;
  border-width:0 0 1px;
  background:transparent;
}
body.mini-site[data-layout-key="minimal"] .mini-app-content-card img {
  max-height:240px;
  min-height:0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-contact-grid { grid-template-columns:1fr; }
body.mini-site[data-layout-key="minimal"] .mini-app-contact-grid article {
  border-radius:0;
  border-width:0 0 1px;
  background:transparent;
}

/* Editorial and Minimal also reorganize internal screens. */
body.mini-site[data-layout-key="editorial"] .mini-app-rail-screen {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-rail-screen {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
body.mini-site[data-layout-key="minimal"] .mini-app-rail-screen .mini-app-card {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  min-height:0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-rail-screen .mini-app-card > img,
body.mini-site[data-layout-key="minimal"] .mini-app-rail-screen .mini-app-card-fallback {
  width:76px;
  height:76px;
  margin:8px;
}
body.mini-site[data-layout-key="cinematic"] .mini-app-rail-screen {
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

@media (max-width:760px) {
  body.mini-site[data-layout-key="editorial"] .mini-app-hero {
    grid-template-columns:1fr;
    min-height:0;
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-hero-copy {
    grid-column:1;
    grid-row:1;
    padding:28px 22px;
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-hero img {
    grid-column:1;
    grid-row:2;
    height:230px;
    min-height:0;
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-hero-tabs {
    grid-row:3;
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-contact-grid {
    grid-template-columns:1fr;
  }
  body.mini-site[data-layout-key="cinematic"] .mini-app-contact-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:600px) {
  body.mini-site[data-layout-key="cinematic"] .mini-app-hero {
    min-height:clamp(430px,68dvh,590px);
  }
  body.mini-site[data-layout-key="cinematic"] .mini-app-hero h1 {
    font-size:clamp(38px,11vw,54px);
  }
  body.mini-site[data-layout-key="cinematic"] .mini-app-home .mini-app-rail {
    grid-auto-columns:minmax(200px,82%);
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-rail,
  body.mini-site[data-layout-key="editorial"] .mini-app-rail-screen {
    grid-template-columns:1fr;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-hero {
    padding-inline:16px;
  }
}

/* Empty media must not leave a dead half-column or an oversized blank capa. */
body.mini-site[data-layout-key="editorial"] .mini-app-hero:not(:has(img)) { display:block; }
body.mini-site[data-layout-key="editorial"] .mini-app-hero:not(:has(img)) .mini-app-hero-copy { max-width:760px; }
body.mini-site[data-layout-key="cinematic"] .mini-app-hero:not(:has(img)) { min-height:clamp(300px,48dvh,430px); }
body.mini-site[data-layout-key="cinematic"] .mini-app-hero:not(:has(img)) .mini-app-hero-copy { padding-top:clamp(34px,7vw,68px); }

/* ------------------------------------------------------- Links and gallery */
body.mini-site[data-layout-key="cinematic"] .mini-app-links-list { gap:12px; }
body.mini-site[data-layout-key="cinematic"] .mini-app-link-card { min-height:66px; border-radius:18px; padding:14px 16px; }
body.mini-site[data-layout-key="cinematic"] .mini-app-link-card:first-child { border-color:var(--mini-accent); background:color-mix(in srgb,var(--mini-accent) 20%,var(--mini-primary)); }
body.mini-site[data-layout-key="cinematic"] .mini-app-link-icon { width:46px; height:46px; flex-basis:46px; font-size:18px; }
body.mini-site[data-layout-key="cinematic"] .mini-app-gallery-grid { gap:14px; }
body.mini-site[data-layout-key="cinematic"] .mini-app-gallery-item:first-child { grid-column:1/-1; }
body.mini-site[data-layout-key="cinematic"] .mini-app-gallery-item:first-child .mini-app-gallery-media { aspect-ratio:16/9; }
body.mini-site[data-layout-key="cinematic"] .mini-app-gallery-item:first-child .mini-app-gallery-copy strong { font-size:15px; }

body.mini-site[data-layout-key="editorial"] .mini-app-links-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
body.mini-site[data-layout-key="editorial"] .mini-app-link-card { align-items:flex-start; border-radius:0; border-width:1px 0 0; border-color:color-mix(in srgb,var(--mini-accent) 34%,transparent); background:transparent; box-shadow:none; padding:14px 4px; }
body.mini-site[data-layout-key="editorial"] .mini-app-link-icon { width:36px; height:36px; flex-basis:36px; border-radius:8px; background:transparent; border:1px solid color-mix(in srgb,var(--mini-accent) 40%,transparent); }
body.mini-site[data-layout-key="editorial"] .mini-app-gallery-grid { gap:16px; }
body.mini-site[data-layout-key="editorial"] .mini-app-gallery-item { border-radius:0; border-width:0 0 1px; background:transparent; }
body.mini-site[data-layout-key="editorial"] .mini-app-gallery-media { border-radius:0; }
body.mini-site[data-layout-key="editorial"] .mini-app-gallery-copy { padding:9px 2px 12px; border-top:1px solid color-mix(in srgb,var(--mini-accent) 24%,transparent); }
body.mini-site[data-layout-key="editorial"] .mini-app-gallery-zoom { top:6px; right:6px; }

body.mini-site[data-layout-key="minimal"] .mini-app-links-list { gap:2px; margin-top:14px; }
body.mini-site[data-layout-key="minimal"] .mini-app-link-card { min-height:52px; padding:8px 4px; border-width:0 0 1px; border-radius:0; background:transparent; box-shadow:none; gap:11px; }
body.mini-site[data-layout-key="minimal"] .mini-app-link-icon { width:34px; height:34px; flex-basis:34px; font-size:14px; background:transparent; border:1px solid color-mix(in srgb,var(--mini-accent) 34%,transparent); }
body.mini-site[data-layout-key="minimal"] .mini-app-link-copy strong { font-size:13.5px; }
body.mini-site[data-layout-key="minimal"] .mini-app-link-arrow { font-size:13px; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-grid { gap:6px; margin-top:14px; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-item { border-radius:8px; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-media { border-radius:8px; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-copy { padding:7px 8px 8px; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-copy small { -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
body.mini-site[data-layout-key="minimal"] .mini-app-gallery-zoom { width:24px; height:24px; font-size:11px; }

@media (max-width:760px) {
  body.mini-site[data-layout-key="editorial"] .mini-app-links-list { grid-template-columns:1fr; gap:8px; }
}
@media (max-width:600px) {
  body.mini-site[data-layout-key="cinematic"] .mini-app-gallery-item:first-child .mini-app-gallery-media { aspect-ratio:4/3; }
  body.mini-site[data-layout-key="minimal"] .mini-app-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:761px) {
  body.mini-site[data-layout-key="minimal"] .mini-app-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-rail {
    display:grid;
    grid-auto-flow:row;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-columns:auto;
    gap:12px;
    overflow:visible;
    padding-bottom:0;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card { aspect-ratio:1.42/.9; }
}

/* Fase 5 — carrossel explícito e compactação mobile. */
@media (max-width:760px) {
  body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-rail {
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:minmax(210px,76%);
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:inline mandatory;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-rail {
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:minmax(210px,82%);
    gap:10px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:inline mandatory;
  }
  body.mini-site[data-layout-key="editorial"] .mini-app-home .mini-app-category-card {
    aspect-ratio:1.04/.9;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card {
    aspect-ratio:1.18/.9;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-home > .mini-app-rail-section,
  body.mini-site[data-layout-key="editorial"] .mini-app-home > .mini-app-rail-section {
    padding-top:20px;
    padding-bottom:24px;
  }
  body.mini-site[data-layout-key="minimal"] .mini-app-content-section,
  body.mini-site[data-layout-key="editorial"] .mini-app-content-section {
    gap:10px;
    padding-top:18px;
    padding-bottom:22px;
  }
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-rail {
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:100% !important;
  overflow-x:auto !important;
  scroll-snap-type:inline mandatory;
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-category-card {
  display:block !important;
  aspect-ratio:1.18/.82 !important;
  border-radius:18px !important;
  background:#080806 !important;
  box-shadow:var(--p5-shadow-soft) !important;
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-category-card::after {
  display:block !important;
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-category-card img {
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border-radius:0 !important;
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-category-card > span {
  position:absolute !important;
  right:15px !important;
  bottom:14px !important;
  left:15px !important;
  padding:0 !important;
}
body.mini-site[data-mini-cards-visible="1"] .mini-app-home .mini-app-category-card strong {
  white-space:normal !important;
  font-size:clamp(19px,3.2vw,26px) !important;
}

/* Minimal também usa cartões de imagem compactos; a diferença fica na
   densidade e no tamanho, não em uma lista sem hierarquia visual. */
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card {
  display:block;
  aspect-ratio:1.42/.9;
  border-radius:12px;
  background:#080806;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card::after { display:block; }
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card img {
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card > span {
  position:absolute;
  right:10px;
  bottom:9px;
  left:10px;
  padding:0;
}
body.mini-site[data-layout-key="minimal"] .mini-app-home .mini-app-category-card strong {
  color:#fff;
  white-space:normal;
  font-size:13px;
}

/* Hidden components must never be overridden by layout display rules. */
.mini-app-hero-slide[hidden],
.mini-app-card[data-mini-hidden] { display:none !important; }

/* FLEX Motion hooks: stable states only, no animation engine in this phase. */
[data-flex-motion] { --flex-motion-duration:.32s; --flex-motion-ease:cubic-bezier(.2,.7,.2,1); }
[data-flex-state="entering"] { opacity:0; transform:translateY(8px); }
[data-flex-state="entered"] { opacity:1; transform:none; transition:opacity var(--flex-motion-duration) var(--flex-motion-ease),transform var(--flex-motion-duration) var(--flex-motion-ease); }
@media (prefers-reduced-motion:reduce) {
  [data-flex-state="entering"],[data-flex-state="entered"] { opacity:1; transform:none; transition:none; }
}