/*
 * packageTable + packageRow — de tabel "Webshop pakketten." die drie pakketten
 * naast elkaar vergelijkt.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/webshop-laten-maken/ (R9), gemeten op
 * 1440, 1024, 767 en 390px.
 *
 * Twee dingen wijken af van de rest van de site en dat is met opzet:
 *
 * 1. De sectie heeft géén 20px lucht links en rechts en gebruikt daarom niet
 *    `.container`. De tabel is 1280px breed en loopt op een tablet en een
 *    telefoon van rand tot rand het scherm uit — daar hoort geen marge tussen.
 * 2. De marge boven en onder is 159px en op alle vier de breedtes hetzelfde.
 *    Elke andere sectie op deze pagina zakt naar 100 en 75; deze niet.
 */

.packageTable {
  margin-block: 159px;
}

.packageTableInner {
  max-width: var(--containerMax);
  margin-inline: auto;
}

.packageTableTitle {
  margin-bottom: 50px;
  text-align: center;
}

/*
 * Het veegvlak. De schuifbalk is verborgen zoals daar, en `tabindex` maakt het
 * met het toetsenbord te bereiken — anders komt een bezoeker zonder muis nooit
 * bij de derde kolom (§6).
 */
.packageTableScroller {
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.packageTableScroller::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------------------
   De cellen
   ------------------------------------------------------------------ */

/*
 * Elke cel is 320px breed en op een telefoon 240. Dat is een wens en geen wet:
 * de tabel deelt zichzelf in (`table-layout: auto`), dus een kolom met een lange
 * eigenschap erin wordt breder en de tabel schuift dan verder. Zo staat het daar.
 */
.packageTableGrid th,
.packageTableGrid td {
  width: 320px;
  min-width: 320px;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(26, 34, 62, 0.1);
}

/* De pakketnamen bovenaan. */
.packageTableGrid thead th,
.packageTableGrid thead td {
  color: var(--colorNavyMenu);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 30px;
  text-align: center;
}

/*
 * De regelhoogte van 25px staat op élke cel in de tabel en niet per lettermaat:
 * de eigenschap links is 16px en houdt diezelfde 25. Zonder dat wordt haar
 * regel 24 hoog en is elke rij 1px korter dan op samdesign.nl.
 */
.packageTableGrid tbody th,
.packageTableGrid tbody td {
  line-height: 25px;
}

/* De waarde per pakket: cursief, en gecentreerd tenzij het een hele zin is. */
.packageTableGrid td {
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

.packageCellStart {
  text-align: left;
}

/* De eigenschap links: de kop van de rij. */
.packageTableGrid tbody th {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-align: left;
  vertical-align: top;
}

/*
 * De tweede en de vierde kolom hebben een grijs vlak, zodat de drie pakketten om
 * en om oplichten. `nth-child` en niet `nth-of-type`: in de kop is de eerste cel
 * een `<td>` en in een rij een `<th>`, dus tellen we de plek en niet het element.
 */
.packageTableGrid tr > :nth-child(2),
.packageTableGrid tr > :nth-child(4) {
  background: #f3f3f5;
}

/* Het vinkje en het kruisje staan midden in hun cel. */
.packageCellIcon {
  display: inline-block;
}

/*
 * `position: relative` op de cel, want er staat een `.visuallyHidden` in en die
 * is absoluut gepositioneerd. Zonder een gepositioneerde voorouder hangt zo'n
 * span aan het venster in plaats van aan de cel, en dan snijdt het veegvlak hem
 * niet af: op 390px maakte dat het document 895 breed in plaats van 390.
 */
.packageCellMark {
  position: relative;
}

/* ------------------------------------------------------------------
   De knop onder elke kolom
   ------------------------------------------------------------------ */

/*
 * Geen .button uit main.css: die knop heeft een vlak, een verloop en een andere
 * maat. Dit is een omlijnde knop van 215px die alleen in deze tabel voorkomt.
 */
.packageTableButton {
  display: block;
  width: 215px;
  margin-inline: auto;
  padding: 16.5px 27px;
  border: 1px solid var(--colorPink);
  border-radius: 5px;
  color: var(--colorPink);
  font-style: normal;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.4s, color 0.4s;
}

.packageTableButton:hover {
  background: var(--colorPink);
  color: var(--colorWhite);
}

/*
 * De pijl staat op de basislijn van de tekst. De reset zet `display: block` op
 * elke svg, dus moet hij hier terug naar inline — anders komt hij onder het
 * label te staan.
 */
.packageTableButtonIcon {
  display: inline-block;
  margin-left: 9.5px;
}

/* ==================================================================
   Kleiner dan 768
   ================================================================== */

@media (max-width: 767px) {
  .packageTableGrid th,
  .packageTableGrid td {
    width: 240px;
    min-width: 240px;
  }
}