/* ============================================================
   bundle-variants.css — Structural layout variants for PackSwitcher
   (bundlessidan/pack-väljaren), driven av data-bundle-layout på
   .pack-landing (satt av PackSwitcher.razor från AppBundle.BundleLayout,
   se SharedModels.cs). Samma mönster som ui-variants.css redan
   etablerat för ActivityCard — data-attribut + scopade overrides,
   ingen markup-skillnad mellan varianterna.

   Selector-mönster:
     .pack-landing[data-bundle-layout="X"] .target { ... }

   Katalogiserat (etiketter, beskrivningar) i Playtyper.Shared sitt
   LayoutStyleManifest.cs (BundleLayouts) — den filen är facit för
   VILKA värden som är giltiga, den här filen är facit för hur de SER
   UT. "cards" har ingen egen regel här alls — det ÄR bara ui.css:s
   obetingade grundutseende (.pack-landing__grid/.pack-card), så en
   bundle utan BundleLayout satt (eller med okänt värde — se
   PackSwitcher.razor:s KnownBundleLayouts-fallback) ser ut precis som
   innan denna fil fanns.

   Kontrast: samtliga varianter nedan återanvänder .pack-card__name
   (var(--color-text)) och .pack-card__tagline/__arrow
   (var(--color-text-muted)) oförändrade — bara layout, storlek och
   bakgrund skiftar. Bakgrundstoningen i "grid"/"hero" blandar bara in
   14–16% av packets accentfärg mot --color-surface, vilket inte
   rubbar den redan kontrastkontrollerade text/surface-relationen
   nämnvärt (jfr Playtyper-strategin, 2026-07-31).
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   GRID — 2-kolumners rutnät av kvadratiska plattor. Bra när bundlen
   har flera jämbördiga packs och en mer visuell, "app store"-aktig
   känsla önskas snarare än en lista.
   ══════════════════════════════════════════════════════════════ */

.pack-landing[data-bundle-layout="grid"] .pack-landing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 480px;
}

.pack-landing[data-bundle-layout="grid"] .pack-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  aspect-ratio: 1 / 1.05;
  padding: var(--spacing-md, 16px);
  border-left: none;
  border-top: 3px solid var(--pack-accent, var(--color-primary));
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--pack-accent, var(--color-primary)) 16%, var(--color-surface)) 0%,
      var(--color-surface) 65%);
  gap: 4px;
}

.pack-landing[data-bundle-layout="grid"] .pack-card__emoji {
  font-size: 2.5rem;
}

.pack-landing[data-bundle-layout="grid"] .pack-card__tagline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pilen är till för radlayouten (visar "tryck för att öppna" i en
   rad) — i en platta är hela ytan redan uppenbart tryckbar. */
.pack-landing[data-bundle-layout="grid"] .pack-card__arrow {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   HERO — standardpacket (Bundle.DefaultPack, se PackSwitcherService
   sin sortering) visas stort och framhävt, resten som en kompakt
   lista under. Bra när en bundle har en tydlig "huvudutgåva" och
   några sekundära.
   ══════════════════════════════════════════════════════════════ */

.pack-landing[data-bundle-layout="hero"] .pack-landing__grid {
  gap: 8px;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:first-child {
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  border-left: none;
  border-radius: var(--border-radius-xl, 28px);
  box-shadow: var(--card-shadow-hover);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--pack-accent, var(--color-primary)) 14%, var(--color-surface)) 0%,
      var(--color-surface) 70%);
  gap: 10px;
  margin-bottom: 6px;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:first-child .pack-card__emoji {
  font-size: 3.25rem;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:first-child .pack-card__name {
  font-size: 1.25rem;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:first-child .pack-card__arrow {
  align-self: flex-end;
  margin-top: -28px;
}

/* Resten: kompakta rader, ingen tagline (namnet räcker — huvudpacket
   ovan bär redan förklaringen/känslan för hela bundlen). */
.pack-landing[data-bundle-layout="hero"] .pack-card:not(:first-child) {
  padding: 10px var(--spacing-lg, 24px);
  gap: 10px;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:not(:first-child) .pack-card__emoji {
  font-size: 1.5rem;
}

.pack-landing[data-bundle-layout="hero"] .pack-card:not(:first-child) .pack-card__tagline {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   MINIMAL — enradiga, kompakta rader. Bra för bundlar med många
   packs (fler än typ 6–8) där stora kort ger onödigt mycket scroll
   innan hela listan syns.
   ══════════════════════════════════════════════════════════════ */

.pack-landing[data-bundle-layout="minimal"] .pack-landing__grid {
  gap: 2px;
  max-width: 420px;
}

.pack-landing[data-bundle-layout="minimal"] .pack-card {
  padding: 9px 14px;
  border-left-width: 2px;
  border-radius: var(--border-radius-sm, 8px);
  gap: 10px;
}

.pack-landing[data-bundle-layout="minimal"] .pack-card__emoji {
  font-size: 1.25rem;
}

.pack-landing[data-bundle-layout="minimal"] .pack-card__tagline {
  display: none;
}

.pack-landing[data-bundle-layout="minimal"] .pack-landing__mark {
  width: 40px;
  height: 40px;
}