/* Maatschappij-pagina v2 — klassen, vloot, bagage, punctualiteit. Prefix al-. */

/* merkkop */
.al-mark{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;background:var(--al-brand,#00a1de);flex:0 0 auto}
.al-id{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.al-id .mt{display:flex;flex-direction:column}
.al-id .mt .n{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.al-id .mt .s{font-size:16.5px;font-weight:600;color:var(--ink-2);margin-top:3px}

/* reisklassen */
.al-cls{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.al-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column}
.al-c .cap{height:78px;display:flex;align-items:flex-end;padding:12px 18px;color:#0b2233}
.al-c .cap .tg{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.72}
.al-c .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.al-c h3{font-size:19px}
.al-c .pr{display:flex;align-items:baseline;gap:8px}
.al-c .pr .v{font-size:27px;font-weight:800;letter-spacing:-.035em}
.al-c .pr .l{font-size:13.5px;font-weight:600;color:var(--ink-4)}
.al-c .rt{font-size:14px;font-weight:600;color:var(--ink-3)}
.al-c .pl{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.al-c .pl span{font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:99px;background:var(--brand-lo);color:var(--brand);border:1px solid var(--brand-lo-2)}

/* vergelijktabel klassen */
.al-spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-top:14px}
.al-spec .rw{display:grid;grid-template-columns:190px repeat(var(--al-klassen,4),1fr);gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.al-spec .rw:last-child{border-bottom:0}
.al-spec .hr{background:var(--surface-2);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.al-spec .k{font-weight:700;letter-spacing:-.015em;color:var(--ink-2)}
.al-spec .no{color:var(--ink-4)}
.al-spec .yes{color:var(--cheap-ink);font-weight:700}

/* routes */
.al-rt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.al-rt .hr,.al-rt .rw{display:grid;grid-template-columns:150px 1fr 96px 96px 118px 96px;align-items:center;gap:14px;padding:15px 20px}
.al-rt .hr{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.al-rt .rw{border-bottom:1px solid var(--line);font-size:15px}
.al-rt .rw:last-child{border-bottom:0}
.al-rt .rw:hover{background:var(--surface-2)}
.al-rt .rr{font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.al-rt .cy{font-weight:600;color:var(--ink-2)}
.al-rt .pp{font-size:18px;font-weight:800;letter-spacing:-.03em}
.al-rt .dt{font-size:14px;font-weight:700;padding:3px 9px;border-radius:7px;border:1px solid transparent;display:inline-block}
.al-rt .fq,.al-rt .hh{font-size:14.5px;font-weight:600;color:var(--ink-3)}
.al-rt .bt{text-align:right}

/* punctualiteit */
.al-ot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 28px 18px}
.al-otr{display:grid;grid-template-columns:repeat(12,1fr);gap:7px}
.al-ob{display:grid;grid-template-rows:19px 168px 19px;gap:7px;text-align:center}
.al-ob .p{font-size:13.5px;font-weight:800;letter-spacing:-.025em;color:var(--ink-2)}
.al-ob .tk{display:flex;align-items:flex-end}
.al-ob .bar{width:100%;border-radius:6px 6px 3px 3px;background:var(--brand-lo-2);border:1.4px solid var(--brand-lo-2)}
.al-ob.low .bar{background:var(--high-bg);border-color:var(--high-bd)}
.al-ob.hi .bar{background:var(--cheap-bg);border-color:var(--cheap-bd)}
.al-ob .m{font-size:12.5px;font-weight:700;color:var(--ink-3)}

/* bagage */
.al-bag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.al-bag .hr,.al-bag .rw{display:grid;grid-template-columns:230px 1fr 240px;gap:16px;padding:16px 20px;align-items:baseline}
.al-bag .hr{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.al-bag .rw{border-bottom:1px solid var(--line);font-size:15.5px}
.al-bag .rw:last-child{border-bottom:0}
.al-bag .k{font-weight:700;letter-spacing:-.015em}
.al-bag .inc{color:var(--ink-2);font-weight:600}
.al-bag .ex{font-weight:700}

/* vloot */
.al-fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.al-f{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px}
.al-f .fm{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.al-f .t{font-size:17.5px;font-weight:800;letter-spacing:-.025em;margin-top:7px;line-height:1.2}
.al-f .n{display:flex;align-items:baseline;gap:7px;margin-top:12px}
.al-f .n b{font-size:26px;font-weight:800;letter-spacing:-.035em}
.al-f .n span{font-size:13.5px;font-weight:600;color:var(--ink-4)}
.al-f .sp{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:6px}
.al-f .sp div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.al-f .sp .kk{color:var(--ink-4);font-weight:600}
.al-f .sp .vv{font-weight:700}
.al-f .role{font-size:14px;color:var(--ink-3);font-weight:600;margin-top:11px;line-height:1.5}

/* tarieven */
.al-far{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 4px}
.al-far>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px}
.al-far .t{font-size:17px;font-weight:800;letter-spacing:-.02em}
.al-far .s{font-size:15px;color:var(--ink-3);line-height:1.6;margin-top:8px}
.al-far>div.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

@media(max-width:1140px){
  .al-cls{grid-template-columns:1fr 1fr}
  .al-fleet{grid-template-columns:1fr 1fr}
  .al-far{grid-template-columns:1fr}
  .al-spec .rw{grid-template-columns:1fr;gap:7px;padding:16px 18px}
  .al-spec .hr{display:none}
  .al-spec .k{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
  .al-spec .rw>span[data-cl]{display:grid;grid-template-columns:150px 1fr;gap:12px}
  .al-spec .rw>span[data-cl]::before{content:attr(data-cl);font-size:14px;font-weight:700;color:var(--ink-4)}
  .al-rt .hr{display:none}
  .al-rt .rw{grid-template-columns:1fr auto;gap:6px 12px}
  .al-rt .hh,.al-rt .fq{grid-column:1/-1}
  .al-rt .bt{grid-column:1/-1;text-align:left;margin-top:4px}
  .al-bag .hr{display:none}
  .al-bag .rw{grid-template-columns:1fr;gap:5px}
  .al-otr{gap:4px}
  .al-ob{grid-template-rows:0 140px 18px}
  .al-ob .p{visibility:hidden;font-size:0}
}
@media(max-width:760px){
  .al-cls,.al-fleet{grid-template-columns:1fr}
  .al-ot{padding:18px 15px 14px}
}

/* ── Aanvullingen op het ontwerp ──────────────────────────────────────────
   Het mockup vult de kopbalk van een klassekaart met een kleurverloop. Wij
   hebben een stoeltekening die uit nagekeken velden komt, en die zegt meer dan
   een verloopje. De balk wordt daarvoor hoger en de tekening ligt erin; de tag
   blijft er als label overheen liggen. */
.al-c .cap{height:118px;position:relative;padding:0 18px 12px}
.al-c .cap .al-seat{position:absolute;inset:0;width:100%;height:100%;display:block}
.al-c .cap .tg{position:relative;z-index:1}

/* Een uitdrukkelijk "nee" is een bewering en hoort er te staan, maar hij mag
   niet als eigenschap ogen: dezelfde vorm als de andere pillen, in de kleur
   die de site elders voor "duurder of ongunstiger" gebruikt. */
.al-c .pl span.nee{background:var(--high-bg);color:var(--high-ink);border-color:var(--high-bd)}

/* Vakjes zonder gepubliceerde waarde. In de vergelijktabel is dat het verschil
   tussen "de maatschappij zegt nee" en "de maatschappij zegt niets", en die
   twee mogen er niet hetzelfde uitzien. */
.al-spec .no{font-style:normal}

/* Het ontwerp zet de klassen in vier vaste kolommen, want KLM heeft er vier.
   Over onze 56 maatschappijen zijn het er gemiddeld 3,8 en varieert het van 1
   tot 5. Vier vaste kolommen laat bij drie klassen een gat aan de rechterkant
   en breekt bij vijf. Meebewegen lost allebei op, met een ondergrens zodat een
   kaart niet zo smal wordt dat de prijs afbreekt. */
.al-cls{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.al-fleet{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* De vergelijktabel krijgt zijn kolomaantal uit --al-klassen; die variabele
   staat bij de oorspronkelijke regel hierboven en niet hier, omdat een regel
   na de media queries ook op een telefoon zou winnen. */