/*
 * Pelarsidan — ämnesnavet, t.ex. /maklararvode/.
 *
 * Sidan består av tre ytor: hero med sökfält och konverteringspanel, en rad pill-länkar till de
 * populäraste orterna, och ett rutnät av hopfällda län.
 *
 * Tre beslut styr formen:
 *   "Sök före bläddring" — sökfältet är sidans huvudhandling och ligger därför i hero, ovanför
 *   allt bläddringsbart.
 *   "Hero-mönstret" — rubrik, kort ingress och konverteringspanel utan scroll. Se
 *   docs/designbrief.md och docs/varumarke.md. Detta är ett MEDVETET AVSTEG från mockup 08, som
 *   säger "ingen konverteringspanel här"; uppdragsgivaren har upphävt det beslutet. Motiveringen
 *   i sin helhet står i template-parts/pelarsida.php och archive.php.
 *   "Länen är hopfällda <details>" — 764 ortslänkar ligger i DOM:en för sökmotorerna medan
 *   besökaren ser 21 rader. Chevron och öppningsläge ritas i CSS; ingen rad JavaScript.
 *
 * Riksdataraden (.pelare__riksdata) är borttagen. Den staplade regeluppgifter som nyckeltal —
 * bolånetak, kontantinsats, ränteavdrag — och de säger ingenting om besökarens beslut. Kvar av
 * raden är kontrolldatumet, som en enkel rad.
 *
 * Laddas av inc/assets.php när bramaklare_sidtyp() returnerar 'pelare'. Samma fil bär också
 * mellansidan för affiliateklick, som klassas som 'pelare' och länkar den här filen direkt.
 *
 * Inga hexvärden, inga px-textstorlekar, inga egna spacingvärden — allt refererar till
 * tokens.css. Undantagen är hårlinjer och chevronens kantmått, som designen anger exakt.
 */

/* ------------------------------------------------------------------ hero */

/*
 * Hero är ett dämpat petrolfält med tunn underkant — en lugn yta som lyfter sökfältet.
 * .hero i components.css bär bakgrunden; underkanten är det enda som är unikt här.
 *
 * Tvåspalten ärvs från .hero__rad i components.css: text till vänster, panel till höger från
 * temats brytpunkt, staplat under den.
 */
.pelare__hero {
  border-bottom: 1px solid var(--f-linje);
}

/*
 * Utan panel finns ingen högerspalt att fylla, och .hero__rad:s andra kolumn hade lämnat
 * 21 rem tomt petrolfält bredvid rubriken. Panelen uteblir när avdelningen saknar användbar
 * partner — mallarna sätter då inte modifieraren, och heron går tillbaka till en spalt.
 *
 * Skrivet som ett undantag på :not() i stället för som en modifierare som LÄGGER TILL spalten:
 * .hero__rad äger tvåspalten och ska fortsätta göra det, så att en ändring där slår igenom här.
 */
@media (min-width: 56.25rem) {
  .pelare__hero:not(.pelare__hero--med-panel) > .hero__rad {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------- sök och träffar */

/*
 * Sökformuläret har flyttat till .ortssok i components.css — samma komponent som startsidan
 * renderar, via template-parts/ortssok.php. De gamla .pelare__sok-reglerna hörde till markup
 * som inte längre finns.
 *
 * Kvar här: träfflistan, som bara den här sidan har. Den är svaret på en fråga besökaren just
 * ställt och ska ligga tätt intill fältet, inte som en egen sektion långt ned.
 */
.pelare__traffar {
  margin-top: var(--s-5);
}

.pelare__intetraff {
  color: var(--f-text-dampad);
  font-size: var(--t-s);
}

/* ---------------------------------------------------------- kontrollraden */

/*
 * Allt som är kvar av den gamla riksdataraden. Nyckeltalen (.pelare__riksdata,
 * .pelare__nyckeltal, .pelare__varde) är borttagna — se filhuvudet.
 *
 * Kontrolldatumet bär sidans auktoritet, för sidan har ingen byline. Det är en signatur och
 * inte ett värde, och står därför i --t-xs och dämpad text — läsbart (7,5:1) men underordnat
 * både ingressen och sökfältet.
 */
.pelare__kontrollrad {
  margin: 0;
}

.pelare__kontroll {
  font-size: var(--t-xs);
  color: var(--f-text-dampad);
}

/* -------------------------------------------------------- populära orter */

.pelare__populara {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-6);
}

/* Etiketten är en rubrik i dokumentets disposition men får inte se ut som en — den ska märka
   raden, inte inleda ett kapitel. */
.pelare__etikett {
  font-size: var(--t-xs);
  font-weight: var(--vikt-halvfet);
  letter-spacing: .04em;
  color: var(--f-text-dampad);
}

/* --------------------------------------------------------------- välj län */

.pelare__sektionshuvud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}

/* Sektionsrubriken är underordnad H1 — den ska leda ögat, inte tävla med det. */
.pelare__lan > .pelare__sektionshuvud > h2 {
  font-size: var(--t-xl);
}

/* Raden är en upplysning om hur rutnätet fungerar, inte en rubrik. */
.pelare__lanantal {
  font-size: var(--t-s);
  color: var(--f-text-svag);
}

/*
 * Tre spalter från temats brytpunkt, en under den. align-items: start gör att ett utfällt län
 * växer nedåt i sin egen cell i stället för att sträcka grannarna.
 */
.pelare__lanrutnat {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 56.25rem) {
  .pelare__lanrutnat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- länskort */

/*
 * Ingen overflow: hidden. <summary> är första barnet och fyller kortets bredd, men dess
 * fokusring ritas UTANFÖR border-box — den skulle klippas bort. Länskorten är
 * tangentbordsstyrda kontroller på en sida vars enda innehåll är navigation.
 */
.lankort {
  background: var(--f-yta-upphojd);
  border: 1px solid var(--f-linje);
  border-radius: var(--radie-l);
  padding-inline: var(--s-4);
}
.lankort[open] { border-color: var(--f-linje-stark); }

.lankort__huvud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  font-size: var(--t-s);
  font-weight: var(--vikt-halvfet);
  cursor: pointer;
}
/* Webbläsarens egen triangel bort — chevronen ritas i .lankort__chevron. */
.lankort__huvud { list-style: none; }
.lankort__huvud::-webkit-details-marker { display: none; }
.lankort__huvud::marker { content: ""; }
.lankort__huvud:hover { color: var(--f-primar); }

/* Länsnamnet får bryta rad; ortsantal och chevron ska aldrig klämmas ihop. "Västra Götaland"
   är dubbelt så långt som "Gotland" och de tre spalterna är smala. */
.lankort__namn { min-width: 0; }

.lankort__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Ortsantalet är en uppgift, inte dekoration — mono och dämpad (7,5:1). */
.lankort__antal {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  font-weight: var(--vikt-normal);
  color: var(--f-text-dampad);
}

/* Chevron av två kanter, roterad. Pekar ner när kortet är stängt, upp när det är öppet. */
.lankort__chevron {
  flex: none;
  width: var(--s-2);
  height: var(--s-2);
  margin-top: -.15em;
  border-right: 2px solid var(--f-primar);
  border-bottom: 2px solid var(--f-primar);
  transform: rotate(45deg);
  transition: transform var(--overgang);
}
.lankort[open] > .lankort__huvud > .lankort__meta > .lankort__chevron {
  transform: rotate(-135deg) translate(-.15em, -.15em);
}

.lankort__kropp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
}

/* Ortchipsen är tätare än sidans övriga taggar — de sitter många i en liten ruta. */
.lankort__orter { gap: var(--s-2); }
.lankort__orter .tagg {
  border-color: transparent;
  background: var(--f-yta-dampad);
}
.lankort__orter .tagg:hover {
  border-color: var(--f-linje-stark);
  background: var(--f-primar-mjuk);
}

/* Petrol, inte koppar: det här är intern navigation. */
.lankort__alla {
  font-size: var(--t-xs);
  font-weight: var(--vikt-halvfet);
  color: var(--f-primar);
  text-decoration: none;
}
.lankort__alla:hover {
  color: var(--f-primar-hover);
  text-decoration: underline;
}

/* ------------------------------------------------- avdelning (posttyp-arkiv) */

/*
 * Avdelningarna — /bolan/, /salja/, /kopa/, /langivare/ och /fastighetsmaklare/ — renderas av
 * archive.php och bär pelarsidans formspråk rakt av: samma petrolmjuka hero (.pelare__hero),
 * samma kontrollrad och samma <details>-dragspel. Därför står bara skillnaderna här, och inte
 * en kopia av allt ovanför.
 *
 * Det gäller ÄVEN konverteringspanelen: avdelningen bär samma hero-mönster som pelarsidan och
 * behöver därför ingen egen regel. .hero__rad och .cta-panel i components.css gör hela jobbet.
 *
 * Skillnaden mot pelarsidan är att avdelningen HAR redaktionell brödtext och frågor — det är
 * det som gör den till en sida och inte en lista.
 *
 * Brödtextens radlängd och frågornas bredd ägs redan av .innehall respektive .faq__lista.
 */

/* Sektionsrubrikerna är underordnade H1 och ska leda ögat, inte tävla med det — samma
   storlek som pelarsidans "Välj län" och som .faq__rubrik. */
.avdelning__rubrik { font-size: var(--t-xl); }

/*
 * Pelarsidans brödtextsektion (/maklararvode/) sätter ingen klass på sin rubrik och landade
 * därför på h2:ns basstorlek, --t-2xl. På samma sida står .faq__rubrik i --t-xl: två
 * jämnbördiga sektionsrubriker i olika storlek. Här får de samma.
 */

/*
 * RUBRIKTRAPPAN I BRÖDTEXTEN
 *
 * Avsnitten i the_content() är H2 och fick därmed --t-xl ur content.css — exakt samma storlek
 * som sektionsrubriken de ligger UNDER. På /kopa/ stod "Så går ett bostadsköp till" och "Börja
 * med lånelöftet" i 32 px med tolv pixlar emellan: två likadana rubriker på rad, utan något som
 * visar vilken som rymmer den andra.
 *
 * Avsnitten kliver därför ner ett steg var. Trappan blir h1 (--t-3xl) → sektion (--t-xl) →
 * avsnitt (--t-l) → underavsnitt (--t-m), och varje nivå är synligt mindre än sin förälder.
 * Storleken ändras bara här, inne i de här två sektionerna; .innehall på övriga sidtyper — där
 * H2 ÄR den översta rubriken efter H1 — behåller sin.
 */
.avdelning__om .innehall > h2,
.avdelning__text .innehall > h2 { font-size: var(--t-l); }

.avdelning__om .innehall > h3,
.avdelning__text .innehall > h3 { font-size: var(--t-m); }

/*
 * Luft mellan sektionsrubriken och första avsnittet. content.css nollar med rätta marginalen på
 * .innehall:s första barn, men här är det barnet en rubrik som möter en annan rubrik, och
 * sektionens flode--tat ger bara --s-3. Utan den här raden klibbar de två ihop.
 */
.avdelning__om > .innehall > :first-child,
.avdelning__text > .innehall > :first-child { margin-top: var(--s-4); }

/*
 * Hårlinje där sidan byter jobb: från läsande (hero, brödtext) till ansökande (partnerlistan),
 * vidare till bläddrande (kortrutnät) och sist till frågorna. Linjen sätts på det EFTERFÖLJANDE
 * syskonet, så att den uteblir när blocket före saknas — en avdelning utan brödtext ska inte
 * inledas med en ensam linje.
 *
 * Paren räknas upp i stället för att skrivas som "* + *": mellan blocken finns även
 * paginering och tomtillståndets sökformulär, och de ska inte få linje.
 */
.avdelning__om + .partnerlista,
.avdelning__om + .avdelning__lista,
.partnerlista + .avdelning__lista,
.avdelning__lista + .faq {
  border-top: 1px solid var(--f-linje);
  padding-top: var(--s-6);
}

/* --------------------------------------------------- partnerlistan */

/*
 * "Här kan du ansöka om bolån" — avdelningens huvudsakliga konverteringsyta, direkt efter
 * brödtexten. Se template-parts/avdelningspartners.php för varför den ligger där.
 *
 * Sektionen bär medvetet nästan ingen egen form. Korten är .foretagskort och rutnätet är
 * .foretagslista__rutnat, båda definierade i components.css — partnerlistan ska se ut exakt
 * som företagsraden på orts- och landningssidorna, för det är samma erbjudande. Det enda som
 * behövs här är ingressen mellan rubriken och korten.
 *
 * Ingen egen bakgrund och ingen ram: en inramad yta mitt i sidan hade lästs som en annons,
 * och korten bär redan sin egen upphöjda yta. Kopparn sitter kvar där den hör hemma — på
 * knapparna inuti korten.
 */
.partnerlista__ingress {
  margin: 0;
  font-size: var(--t-s);
  color: var(--f-text-dampad);
  max-width: var(--bredd-innehall);
}

/* --------------------------------------------------- nästa steg-kortet */

/*
 * Avdelningens andra konverteringsväg, sist på sidan. Panelen i heron möter den som landar
 * och skummar; det här kortet möter den som läst klart. Båda pekar på samma partner.
 *
 * Formen är avsiktligt en ANNAN än .cta-panel: panelen är en smal pelare bredvid rubriken,
 * det här är ett brett liggande kort under brödtexten. Skillnaden i form är det som gör att
 * kortet läses som "nästa steg efter att du läst klart" och inte som en upprepning av
 * panelen längst upp.
 *
 * Petrolmjuk botten, samma ton som heron: kortet hör till sidan och är inte en annons som
 * klistrats på. Kopparn får då bära hela handlingssignalen ensam.
 */
.avdelningscta {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--f-primar-mjuk);
  border: 1px solid var(--f-linje);
  border-radius: var(--radie-l);
}

/* Texten får aldrig bli bredare än läsbar radlängd, ens när kortet fyller hela sidbredden. */
.avdelningscta__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  max-width: var(--bredd-innehall);
}

/* Underordnad H1 och i nivå med .avdelning__rubrik och .faq__rubrik — kortet är ett steg
   på sidan, inte ett nytt kapitel. */
.avdelningscta__rubrik { font-size: var(--t-l); }

.avdelningscta__lofte {
  margin: 0;
  font-size: var(--t-s);
  color: var(--f-text-dampad);
}

/*
 * Från temats brytpunkt lägger sig text och knapp bredvid varandra: löftet läses vänsterifrån
 * och handlingen står där blicken slutar. Knappkolumnen är fast så att en lång knapptext inte
 * äter upp textens radlängd.
 */
@media (min-width: 56.25rem) {
  .avdelningscta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-6);
  }

  .avdelningscta__handling {
    flex: none;
    width: 16rem;
  }
}

/* ------------------------------------------------------- mellansida */

/*
 * Klickvägen ut till partnern. Egen yta i hero-bottnens petrolmjuka så att besökaren ser att
 * hen lämnat innehållet, men fortfarande är kvar hos oss.
 */
.mellansida {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f-primar-mjuk);
  text-align: center;
}

.mellansida__ruta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  max-width: var(--bredd-innehall);
}

.mellansida__rubrik { font-size: var(--t-xl); }

.mellansida__text {
  font-size: var(--t-s);
  color: var(--f-text-dampad);
}

.mellansida__logga {
  margin-top: var(--s-3);
  max-height: 3.25rem;
  width: auto;
  object-fit: contain;
}

.mellansida__snurra {
  margin-top: var(--s-4);
  width: 3.25rem;
  height: 3.25rem;
  border: 4px solid var(--f-linje);
  border-top-color: var(--f-primar);
  border-radius: var(--radie-pill);
  animation: mellansida-snurr 1s linear infinite;
}

@keyframes mellansida-snurr { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mellansida__snurra { animation: none; }
}

/* Reklammärkningen är ett lagkrav (marknadsföringslagen 9 §) och håller 7,5:1. */
.mellansida__markning {
  font-size: var(--t-xs);
  color: var(--f-text-dampad);
}