/* ================================================================
   Logos pattern — visualiserar Futurs varumärkes-assets
   ================================================================
   Förutsätter att tokens-filen, fonts/pattern.css och
   typography-scale/pattern.css är laddade.
================================================================ */

/* Groups (rendered by JS) */
.logo-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spc-08);
  margin-top: var(--spc-08);
}

.logo-group {
  display: flex;
  flex-direction: column;
  gap: var(--spc-05);
}

.logo-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spc-04);
  padding-bottom: var(--spc-03);
  border-bottom: 1px solid var(--border-tertiary);
}

.logo-group__title {
  margin: 0;
  color: var(--content-primary);
}

.logo-group__count {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  white-space: nowrap;
}

.logo-group__description {
  margin: calc(var(--spc-02) * -1) 0 0 0;
  font-family: var(--type-family-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--content-tertiary);
}

/* Card grid — bredare kort eftersom logotyper har lockup */
.logo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spc-05);
}

/* Quad-grid — Logotyp + Symbol-grupperna har exakt 4 varianter och ska
   visa dem som 4 kolumner på desktop. Tablet 2, mobile 1. */
.logo-card-grid--quad {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .logo-card-grid--quad { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .logo-card-grid--quad { grid-template-columns: 1fr; }
}

/* Showcase-grid — 2 stora kort som tar upp hela bredden. Används av
   fade och app-ikon eftersom källorna är hög-upplösta och varianterna
   få (positive/negative). Smala viewports → 1 kolumn. */
.logo-card-grid--showcase {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .logo-card-grid--showcase { grid-template-columns: 1fr; }
}

.logo-card--fade .logo-card__preview,
.logo-card--app-icon .logo-card__preview {
  padding: var(--spc-05);
  min-height: 280px;
}

/* Favicon-grid — uniform auto-fill grid. Alla kort har samma bredd,
   bilden centreras i preview-arean och visas i native pixel size när
   den får plats (16/32/48/64/128/180/196 alla < kort-bredd). Större
   favicons (256/512) skalas ner med bibehållen aspect ratio så de
   passar inom kortet. Ger ren visuell rytm utan whitespace-luckor. */
.logo-card-grid--favicon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spc-04);
}

/* Card */
.logo-card {
  display: flex;
  flex-direction: column;
  background: var(--background-secondary);
  border-radius: var(--shp-md);
  /* overflow: hidden borttagen — klippte favicon-content i masonry-griden.
     Border-radius på preview-area + meta-area istället så hörnen blir
     fortfarande rundade utan att klippa innehåll. */
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.logo-card:hover {
  box-shadow: var(--elevation-button-hover);
}

.logo-card:active {
  transform: translateY(1px);
}

.logo-card:focus-visible {
  outline: var(--spacing-outline-focus-width) solid var(--content-primary);
  outline-offset: var(--spacing-outline-focus-offset);
}

/* Preview-area — surface beror på variant. Egen border-radius på top-hörn
   så card-borders rundas korrekt utan overflow:hidden på parent. */
.logo-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spc-08) var(--spc-05);
  min-height: 140px;
  border-top-left-radius: var(--shp-md);
  border-top-right-radius: var(--shp-md);
}

/* Light surface — för positive-varianter */
.logo-card__preview--light {
  background: var(--clr-key-white, #ffffff);
}

/* Dark surface — för negative-varianter */
.logo-card__preview--dark {
  background: var(--clr-key-black, #141414);
}

/* Neutral surface — för color-varianter (ingen "right" bakgrund) */
.logo-card__preview--neutral {
  background: var(--background-tertiary);
}

/* Web-standard: 48 px höjd, bredd auto. SVG:ns viewBox bevarar aspect ratio.
   Pattern-vyn dogfoodar specen — ingen hårdkodad bredd här heller. */
.logo-card__image {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
}

/* Symbol är square (1:1) — 48 × 48 px matchar logotype-höjden så
   grid-raderna blir vertikalt balanserade. */
.logo-card--symbol .logo-card__image {
  height: 48px;
  width: 48px;
}

/* Fade + App-ikon: showcase-rendering. Källfilerna är hög-upplösta
   (fade är 534×812, app-ikon 841×841) — låt dem renderas stora så
   detaljerna syns. Free aspect ratio, kvadrat-aware. */
.logo-card--fade .logo-card__image,
.logo-card--app-icon .logo-card__image {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 240px;
}

/* Favicon-cards — uniform sizing, ingen span-modifiering. Card-höjden
   bestäms av rad-grupperingen (alla kort i en rad får samma höjd som
   den största). Min-width skyddar mot smala kort med tunn meta-rad. */
.logo-card--favicon {
  min-width: 0;
}

.logo-card--favicon .logo-card__preview {
  flex: 1;
  padding: var(--spc-06) var(--spc-05);
  min-height: 200px;  /* baseline preview-yta, ger uniform känsla */
  background: var(--clr-key-white, #ffffff);
}

/* Image-rendering: native pixel size där det får plats (16-196 är alla
   mindre än 220px-kortet), större (256/512) skalas ner med bibehållen
   aspect ratio. width/height-attributen på <img> styr base-storlek,
   max-width/height kapar för overflow-säkerhet. */
.logo-card--favicon .logo-card__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Meta-area — namn, beskrivning, taggar */
.logo-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spc-02);
  padding: var(--spc-05);
}

.logo-card--favicon .logo-card__meta {
  padding: var(--spc-04);
  flex: 1;
}

.logo-card__name {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--content-primary);
}

.logo-card__description {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--content-tertiary);
}

.logo-card__usage {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 400;
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--content-tertiary);
}

.logo-card__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spc-02);
  margin-top: var(--spc-02);
}

.logo-card__file {
  display: inline-flex;
  align-items: center;
  gap: var(--spc-02);
  padding: var(--spc-02) var(--spc-03);
  background: var(--background-tertiary);
  border-radius: var(--shp-sm);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--content-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: var(--type-family-code);
}

.logo-card__file:hover {
  background: var(--background-primary, var(--clr-key-white));
  box-shadow: var(--elevation-button-hover);
}

.logo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spc-02);
  margin-top: var(--spc-03);
}

.logo-card__tag {
  display: inline-block;
  padding: 2px var(--spc-03);
  background: var(--background-tertiary);
  border-radius: var(--shp-full);
  font-family: var(--type-family-body);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--content-tertiary);
}

/* Tagline samples — typografi, inte asset-kort */
.tagline-samples {
  display: flex;
  flex-direction: column;
  gap: var(--spc-05);
}

.tagline-sample {
  display: flex;
  flex-direction: column;
  gap: var(--spc-04);
  padding: var(--spc-07);
  background: var(--background-secondary);
  border-radius: var(--shp-md);
}

.tagline-sample__preview {
  color: var(--content-primary);
  /* Typsnittsstilen kommer från type-style-* klassen som JS sätter */
}

.tagline-sample__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spc-02);
  padding-top: var(--spc-04);
  border-top: 1px solid var(--border-tertiary);
}

.tagline-sample__label {
  font-family: var(--type-family-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--content-primary);
}

.tagline-sample__class {
  font-family: var(--type-family-code);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  background: var(--background-tertiary);
  padding: 2px 6px;
  border-radius: var(--shp-sm);
  align-self: flex-start;
}

.tagline-sample__usage {
  margin: 0;
  font-family: var(--type-family-body);
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--content-tertiary);
}

/* Pending-grupp — placeholder för fade och tagline */
.logo-group--pending {
  background: var(--background-secondary);
  border-radius: var(--shp-md);
  padding: var(--spc-07);
}

.logo-group--pending .logo-group__head {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--spc-04);
}

.logo-group__pending-note {
  margin: 0;
  font-family: var(--type-family-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--content-tertiary);
}

.logo-group__pending-note strong {
  color: var(--content-primary);
  font-weight: 700;
}

.logo-group__pending-tag {
  display: inline-block;
  padding: 2px var(--spc-03);
  background: var(--background-tertiary);
  border-radius: var(--shp-full);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: var(--spc-03);
  vertical-align: middle;
}

/* Copy-feedback */
.logo-card__copied {
  position: fixed;
  bottom: var(--spc-08);
  left: 50%;
  transform: translateX(-50%);
  background: var(--background-secondary);
  border-radius: var(--shp-full);
  padding: var(--spc-03) var(--spc-05);
  font-family: var(--type-family-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--content-primary);
  box-shadow: var(--elevation-popover);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.logo-card__copied--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Smal viewport: kompakt grid */
@media (max-width: 600px) {
  .logo-card-grid {
    grid-template-columns: 1fr;
    gap: var(--spc-04);
  }
  .logo-card__preview {
    padding: var(--spc-06) var(--spc-04);
    min-height: 100px;
  }
  /* Mobile: behåll 48 px-spec — ingen scale-down */
}