/* Contentmaat · de pagina's naast de beginpagina: per branche en de kostenpagina (gemaakt met tools/paginas.mjs). Ze
   gebruiken site.css (kop, voet, knoppen, pakketten, vragen); hier staan alleen hun eigen onderdelen: het kruimelpad,
   het woord in het koraal wolkje in de kop, het voorbeeld van een week, "Wat werkt", de voorbeeldteksten bij de ideeën
   en op de kostenpagina de bon, de tabel met marktprijzen en de bron. */

/* Kruimelpad boven de kop: Contentmaat › Social media voor kappers. */
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 18px; font-size: 14px; font-weight: 550; color: var(--muted); }
.kruimel a { text-decoration: none; }
.kruimel a:hover { color: var(--ink); text-decoration: underline; }
.kruimel [aria-current] { color: var(--ink); }

/* De kop: "Social media voor [kappers]." met het woord in het koraal wolkje, zoals op de beginpagina (maar zonder te
   wisselen), en daaronder de belofte met de gele markering. */
.pg-kop { display: block; }
.pg-woord { display: inline-block; white-space: nowrap; background: var(--coral); color: #fff; line-height: 1.12; padding: .02em .2em .08em; border-radius: .2em .2em .2em .06em; }
@media (min-width: 961px) { .pg-hero .visual { align-self: center; } }

/* Voorbeeld van een week: drie posts met dag, tijd en of ze al ingepland staan (de kleuren van het klantportaal). */
.pg-week { margin: 0; width: 100%; }
.pg-week-kaart { width: min(400px, 100%); background: #fff; border-radius: 26px; padding: 18px 16px 16px; box-shadow: 0 6px 0 var(--line), 0 26px 50px rgba(26, 20, 35, .12); transform: rotate(1.2deg); }
.pg-week-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 6px 12px; }
.pg-week-kop b { font: 800 20px/1.2 var(--display); letter-spacing: -.02em; }
.pg-week-kop span { font-size: 13px; font-weight: 650; color: var(--muted); }
.pg-week-lijst { display: grid; gap: 8px; }
.pg-week-lijst li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--cream); border-radius: 16px; padding: 10px 12px 10px 10px; }
.pg-dag { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px 13px 13px 4px; background: var(--coral-strong); color: #fff; font: 800 16px/1 var(--display); }
.pg-week-lijst li:nth-child(2) .pg-dag { background: var(--lilac); color: var(--ink); }
.pg-week-lijst li:nth-child(3) .pg-dag { background: var(--mint); color: var(--mint-ink); }
.pg-wat { display: grid; min-width: 0; line-height: 1.3; }
.pg-wat b { font-size: 15px; font-weight: 650; }
.pg-wat small { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pg-week-lijst em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.5; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pg-week figcaption { font-size: 13.5px; color: var(--muted); }

/* Lichte vlakken tussen de crème secties, zoals "Over Milan" op de beginpagina. */
.pg-vlak { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Wat werkt: links de kop en de uitleg, rechts vier punten met een vinkje. */
.pg-werkt-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.pg-werkt { display: grid; gap: 14px; }
.pg-werkt li { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; box-shadow: 0 4px 0 var(--line); padding: 18px 22px 18px 60px; color: #3a3343; font-size: 15.5px; line-height: 1.5; }
.pg-werkt li::before { content: ""; position: absolute; left: 20px; top: 19px; width: 24px; height: 24px; border-radius: 8px 8px 8px 3px; background: var(--coral-strong); }
.pg-werkt li::after { content: ""; position: absolute; left: 27px; top: 26px; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.pg-werkt b { display: block; margin-bottom: 4px; color: var(--ink); font: 750 18px/1.3 var(--display); letter-spacing: -.015em; }

/* Ideeën: de kaarten van "Hoe het werkt" (site.css, .steps), met onderaan een voorbeeldtekst. De voorbeelden staan in
   alle kaarten op dezelfde hoogte, onderaan. */
.pg-ideeen .step { display: flex; flex-direction: column; }
.pg-ideeen .num { align-self: flex-start; }
.pg-ideeen .step > p:not(.pg-vb) { margin-bottom: 14px; }
.step .pg-vb { margin-top: auto; padding-top: 12px; border-top: 1.5px dashed rgba(26, 20, 35, .16); font-size: 14.5px; font-style: italic; color: #3a3343; }
.pg-vb b { display: block; margin-bottom: 4px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-press); }

/* Kostenpagina: de "bon" in de hero (wat je bij ons betaalt), de tabel met marktprijzen en de bron, en vier korte
   blokken bij "Zo verhoudt het zich". */
.pg-bon { margin: 0; width: 100%; }
.pg-bon-kaart { width: min(360px, 100%); background: #fff; border-radius: 26px; padding: 22px 24px 18px; box-shadow: 0 6px 0 var(--line), 0 26px 50px rgba(26, 20, 35, .12); transform: rotate(-1.2deg); }
.pg-bon-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--line); font-size: 13.5px; font-weight: 650; color: var(--muted); }
.pg-bon-prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 16px 0 12px; font: 800 48px/1 var(--display); letter-spacing: -.035em; }
.pg-bon-prijs small { font: 500 14px/1.3 var(--body); letter-spacing: 0; color: var(--muted); }
.pg-bon-regels { margin: 0; }
.pg-bon-regels > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pg-bon-regels dt { color: var(--muted); }
.pg-bon-regels dd { margin: 0; font-weight: 700; text-align: right; }

.pg-tabel-wrap { margin-top: 36px; overflow: hidden; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; box-shadow: 0 5px 0 var(--line); }
.pg-tabel { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.pg-tabel th, .pg-tabel td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pg-tabel thead th { background: var(--paper); font-size: 13.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.pg-tabel tbody th { font: 750 17px/1.3 var(--display); letter-spacing: -.01em; }
.pg-tabel td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.pg-tabel td:nth-child(3) { white-space: nowrap; }
.pg-tabel td:last-child { color: #3a3343; }
.pg-tabel tbody tr:last-child > * { border-bottom: 0; }
/* De twee regels van Contentmaat in koraal, net als de kaart van Contentmaat bij de vergelijking op de beginpagina. */
.pg-tabel .pg-ons > * { background: var(--coral-strong); color: #fff; border-bottom-color: rgba(255, 255, 255, .25); }
.pg-tabel .pg-ons td:last-child { color: #fff; }
.pg-bron { margin-top: 16px; max-width: 56rem; font-size: 14px; color: var(--muted); }
.pg-bron a { color: var(--ink); font-weight: 600; }

.pg-uitleg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pg-uitleg > div { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 24px 26px; box-shadow: 0 4px 0 var(--line); }
.pg-uitleg p { margin-top: 8px; font-size: 15.5px; color: #3a3343; }

/* Slot: links de tekst met daaronder de knop naar de gratis scan op de beginpagina, rechts het voorbeeld van de scan.
   Op telefoon en tablet: tekst, voorbeeld en als laatste de knop. */
.pg-slot-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "tekst beeld" "knop beeld"; gap: 0 56px; align-items: start; }
.pg-slot-tekst { grid-area: tekst; }
.pg-slot .scan-vb { grid-area: beeld; margin: 0; align-self: center; justify-self: center; width: 100%; }
.pg-slot .ctas { grid-area: knop; margin-top: 28px; }

/* Op een smal scherm wordt elke regel van de tabel een kaartje: de naam bovenaan, daaronder prijs, posts en wat erbij
   zit, met het label ervoor. */
@media (max-width: 760px) {
  .pg-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pg-tabel, .pg-tabel tbody, .pg-tabel tr, .pg-tabel th, .pg-tabel td { display: block; }
  .pg-tabel tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .pg-tabel tbody tr:last-child { border-bottom: 0; }
  .pg-tabel th, .pg-tabel td { padding: 0; border: 0; }
  .pg-tabel tbody th { margin-bottom: 8px; }
  .pg-tabel td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; white-space: normal; }
  .pg-tabel td:nth-child(3) { white-space: normal; }
  .pg-tabel td::before { content: attr(data-label); font-size: 13.5px; font-weight: 600; color: var(--muted); }
  .pg-tabel .pg-ons { background: var(--coral-strong); border-bottom-color: rgba(255, 255, 255, .25); }
  .pg-tabel .pg-ons td::before { color: rgba(255, 255, 255, .85); }
  .pg-uitleg { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .pg-werkt-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-slot-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "beeld" "knop"; }
  .pg-slot .scan-vb { margin-top: 34px; justify-self: start; }
}
@media (max-width: 600px) {
  .pg-week-kaart, .pg-bon-kaart { transform: none; }
  .pg-week-kaart { padding: 14px 12px 12px; }
  .pg-week-lijst li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .pg-week-lijst em { grid-column: 2; justify-self: start; }
  .pg-dag { grid-row: span 2; width: 40px; height: 40px; font-size: 15px; }
  .pg-werkt li { padding: 16px 18px 16px 56px; }
  .pg-werkt li::before { left: 18px; top: 17px; }
  .pg-werkt li::after { left: 25px; top: 24px; }
}