/* /arkiv/ - kategoriindex, se inc/arkiv-index.php + template-arkiv-index.php.
   Boxrutnät i 3 kolumner (kundönskemål 2026-09-02), samma kortstil som
   .ff-partner-index (partners.css) men fast 3 kolumner istället för
   auto-fill, eftersom kundens spec explicit bad om 3 kolumner snarare
   än ett flytande antal.

   Kundens rättning 2026-09-02: rutnätet såg indraget ut till vänster och
   lämnade tomt utrymme åt höger i .ff-col-main. Två separata orsaker,
   samma mönster som redan är löst för [ffusers_forum]/[ffusers_top_users]
   här i filen (se article.css-docblocken om kundens rättning 2026-08-28
   av exakt samma symptom för de widgetarna):
   1. .ff-article-body ul { padding-left: 20px } (article.css) har högre
      specificitet ((0,1,1), klass+element) än en ensam .ff-arkiv-grid-
      regel ((0,1,0)) och vann därför över padding:0 - därav vänsterindraget.
      Löst med .ff-article-body .ff-arkiv-grid (klass+klass, (0,2,0)).
   2. .ff-article-body har en läsbredd på 68ch (prosa-text), som klämde
      ihop rutnätet mot vänsterkanten istället för att fylla hela
      .ff-col-main - därav det tomma utrymmet till höger. Löst med
      samma :has()-mönster som forumet/topplistorna redan använder. */
.ff-article-body:has(.ff-arkiv-grid) {
	max-width: none;
}

.ff-article-body .ff-arkiv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-arkiv-grid__item {
	margin: 0;
}

.ff-arkiv-grid__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 22px;
	background: var(--ff-card-bg);
	border: 1px solid var(--ff-border);
	color: var(--ff-dark);
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
}
.ff-arkiv-grid__link:hover { border-color: var(--ff-green); }

.ff-arkiv-grid__count {
	font-family: var(--ff-font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--ff-text-meta);
	white-space: nowrap;
}

/* /tidigare-event/ (se inc/tidigare-event.php) - samma kort, men med
   datum + titel staplat i två rader istället för namn+antal i en rad.
   Återanvänder .ff-arkiv-grid__count för datumet (samma mono/meta-stil
   som kategorikortens antal). */
.ff-arkiv-grid__link--event {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
}

/* RÄTTNING 2026-09-08 (kundens rapport: rutnätet var inte responsivt alls
   på /temasidor/ och /tidigare-event/ - tre lika breda kolumner tvingades
   fram på alla skärmbredder, med sidoskroll/hopklämda kort på mobil som
   följd). Grundorsaken var specificitet, inte att brytpunkterna saknades:
   basregeln ovan heter ".ff-article-body .ff-arkiv-grid" (två klasser,
   specificitet 0,2,0) medan de här override-reglerna bara skrev
   ".ff-arkiv-grid" (en klass, 0,1,0) - lägre specificitet vinner aldrig,
   oavsett att media queryn matchade korrekt. Löst genom att upprepa samma
   sammansatta selector här. Passade samtidigt på att byta brytpunkten för
   en kolumn från 640px till samma <1024px-gräns som resten av temat
   använder för "mobil" (se brytpunktskommentaren högst upp i grid.css) -
   annars stod rutnätet kvar i tre (redan trasiga) kolumner även i
   641-1023px-intervallet. */
@media (max-width: 1239px) and (min-width: 1024px) {
	.ff-article-body .ff-arkiv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
	.ff-article-body .ff-arkiv-grid { grid-template-columns: 1fr; }
}