/* press-text.css: presstexten, Om gruppen och Fler grupper.

   Tokens (--kort, --brod, --dampad, --regel, --platta, --accent, typsnitten)
   kommer ur press.css. Inga färgvärden skrivs ut här som inte redan har ett
   namn där.

   REGELN OM RAMAR GÄLLER HÄR OCKSÅ
   Ingen border runt något element. Korten bärs av fyllning mot den tonade
   sidbakgrunden plus samma svaga skugga som ingångskorten i press.css. De enda
   border-reglerna i filen är vågräta avdelare mellan faktakortets rader.

   DÄMPAD TON ALDRIG UNDER 14 PX
   #6F7A6F mot vitt ger 4.0:1. Det räcker för text från 14 px och uppåt, inte
   under. Där prototypen har dämpad ton i 12,5 och 13,5 px står texten därför
   antingen i 14 px eller i brödfärgen. Det är enda avsteget från prototypens
   värden i den här filen, och det är medvetet. */

/* --- 1. Presstext --------------------------------------------------------- */

.pt-textrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 3vw, 24px);
}

/* Bara ett kort (gruppen saknar lång text): kortet tar hela bredden i stället
   för att lämna en tom halva bredvid sig. */
.pt-textrad--ensam { grid-template-columns: 1fr; }

.pt-kort {
  background: var(--kort);
  border-radius: 10px;
  padding: clamp(22px, 4vw, 30px);
  box-shadow: 0 6px 16px -10px rgba(40,26,8,0.28);
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.pt-kort-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pt-kort-etikett { font-family: var(--typ-rubrik); font-size: 21px; font-weight: 600; }
.pt-kort-meta { font-size: 14px; color: var(--dampad); }

/* pre-line är hela poängen: styckena i pressmeddelandet ska överleva både
   visningen och kopieringen. Utan den blir den långa texten en vägg. */
.pt-brod {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--brod);
  white-space: pre-line;
  overflow-wrap: break-word;
}

.pt-kopiera {
  align-self: flex-start;
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  transition: transform .15s ease, filter .15s ease;
}
.pt-kopiera:hover { filter: brightness(1.08); }
.pt-kopiera:active { transform: translateY(1px); }

/* --- 2. Om gruppen -------------------------------------------------------- */

.pt-om {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 5vw, 56px);
}
.pt-om-text {
  flex: 1 1 min(320px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pt-om-stycke {
  margin: 0;
  font-size: clamp(16.5px, 2.1vw, 18.5px);
  line-height: 1.65;
  color: var(--brod);
  max-width: 38em;
}

.pt-fakta-spalt { flex: 0 1 min(330px, 100%); min-width: 0; }
.pt-fakta {
  background: var(--kort);
  border-radius: 10px;
  padding: clamp(22px, 4vw, 28px);
  box-shadow: 0 6px 16px -10px rgba(40,26,8,0.28);
}
.pt-fakta-rubrik {
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brod);
}

.pt-fakta-lista { margin: 0; }
.pt-fakta-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--regel);   /* avdelare, inte ram */
}
.pt-fakta-etikett { margin: 0; font-size: 14px; color: var(--dampad); }
.pt-fakta-varde { margin: 0; font-size: 15px; font-weight: 500; color: var(--stark); text-align: right; }

.pt-fakta-slut {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dampad);
}
.pt-fakta-lank { color: var(--accent); font-weight: 600; }

/* --- 3. Fler grupper ------------------------------------------------------ */

.pt-grupper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(12px, 2.4vw, 18px);
}

.pt-grupp { text-decoration: none; color: inherit; display: flex; flex-direction: column; min-width: 0; }

.pt-bricka {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--platta);
  box-shadow: 0 10px 26px -18px rgba(40,26,8,0.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pt-grupp:hover .pt-bricka { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(40,26,8,0.55); }

.pt-bricka-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-bricka-toning { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,4,0.82), rgba(20,12,4,0) 58%); }

.pt-bricka-namn {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 11px;
  color: var(--vit-bricka);
  font-family: var(--typ-rubrik);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  line-height: 1.14;
}

/* Grupp utan bild: brickan blir en färgad platta med gruppens initial som
   märke, i stället för ett tomt beige block med bara namnet bredvid två
   fotobrickor. Färgen är gruppens egen när svaret bär den (sätts inline av
   press-text.js), annars en av de fyra tonerna nedan, vald ur slugen så att
   samma grupp alltid får samma bricka. Namnet står kvar där det står på
   fotobrickorna, så rutnätet läser som en rad. */
.pt-bricka--tom { background: var(--bricka-1); }
.pt-bricka--ton1 { background: var(--bricka-1); }
.pt-bricka--ton2 { background: var(--bricka-2); }
.pt-bricka--ton3 { background: var(--bricka-3); }
.pt-bricka--ton4 { background: var(--bricka-4); }

/* Initialen är dekor: stor, nedtonad och beskuren av brickans kant. Den ligger
   under namnet och bär ingen information (aria-hidden i press-text.js). */
.pt-bricka-initial {
  position: absolute;
  left: 6px;
  top: -6px;
  font-family: var(--typ-rubrik);
  font-weight: 600;
  font-size: 118px;
  line-height: 1;
  color: rgba(255,247,236,0.22);
  user-select: none;
  pointer-events: none;
}

/* --- Tangentbord ---------------------------------------------------------- */
/* outline, aldrig border: ramregeln gäller, och outline flyttar ingenting. */
.pt-kopiera:focus-visible,
.pt-grupp:focus-visible .pt-bricka,
.pt-fakta-lank:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pt-grupp:focus-visible { outline: none; }