/* ==========================================================================
   Iterr — Library sales pages
   Ingeladen door de mu-plugin iterr-library.php, alleen op de librarypagina's.
   Gebruikt de bestaande --iterr-* tokens van iterr.eu; definieert alleen wat
   nieuw is. Alle nieuwe klassen beginnen met .lib- zodat er niets botst.

   ACCENTKLEUREN: de blokken hieronder zijn de enige plek waar de
   productkleuren staan. Pas ze aan als ze afwijken van de PDF's.
   ========================================================================== */

:root{
  /* Retrospective Format Library — teal + coral */
  --lib-retro:        #1B6E68;
  --lib-retro-soft:   #E4F0EE;
  --lib-retro-accent: #E2725B;

  /* Icebreaker Library — petrol + framboos (exact uit build_docx.py) */
  --lib-ice:          #1B4A63;
  --lib-ice-soft:     #E3EDF2;
  --lib-ice-accent:   #C64270;

  /* neutrale defaults, worden per blok overschreven */
  --lib-accent:       var(--iterr-primary, #E89A3C);
  --lib-accent-soft:  var(--iterr-primary-soft, #FFF1DC);
}

.lib-retro{  --lib-accent: var(--lib-retro); --lib-accent-soft: var(--lib-retro-soft); --lib-accent-2: var(--lib-retro-accent); }
.lib-ice{    --lib-accent: var(--lib-ice);   --lib-accent-soft: var(--lib-ice-soft);   --lib-accent-2: var(--lib-ice-accent); }

/* ---------- opbouw ---------- */

.lib{
  font-family: Inter, sans-serif;
  color: var(--iterr-text, #1A1A1A);
  --lib-max: 1100px;
}
.lib *{ box-sizing: border-box; }
.lib section{ padding: 4.5rem 1.25rem; }
.lib section.lib-cream{ background: var(--iterr-cream, #FAF7F2); }
.lib section.lib-dark{ background: var(--iterr-dark, #0E0E0E); color: #fff; }
.lib .lib-wrap{ max-width: var(--lib-max); margin: 0 auto; }
.lib .lib-narrow{ max-width: 720px; margin-left: auto; margin-right: auto; }
.lib .lib-center{ text-align: center; }

.lib .lib-label{
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
  color: var(--lib-accent); font-weight: 500; display: inline-block; margin-bottom: 1rem;
}
.lib h1, .lib h2, .lib h3{
  font-family: Newsreader, "Source Serif 4", Georgia, serif;
  font-weight: 600; color: var(--iterr-text, #1A1A1A); margin: 0 0 1rem;
}
.lib h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; }
.lib h2{ font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; }
.lib h3{ font-size: 1.25rem; line-height: 1.3; }
.lib section.lib-dark h2, .lib section.lib-dark h3{ color: #fff; }
.lib .lib-em{ font-style: italic; color: var(--lib-accent); font-weight: 500; }
.lib section.lib-dark .lib-em{ color: var(--iterr-primary, #E89A3C); }

.lib p{ font-size: 1rem; line-height: 1.65; color: var(--iterr-text-muted, #5A5A5A); margin: 0 0 1rem; }
.lib .lib-lead{ font-size: 1.15rem; line-height: 1.6; }
.lib section.lib-dark p{ color: rgba(255,255,255,.72); }

/* ---------- knoppen ---------- */

.lib .lib-cta,
.lib a.gumroad-button.lib-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--iterr-primary, #E89A3C) !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: 1rem !important; font-weight: 500 !important; line-height: 1 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: .95rem 1.6rem !important; border-radius: 10px !important;
  border: 0 !important; box-shadow: none !important; text-decoration: none !important;
  height: auto !important; width: auto !important; max-width: none !important;
  transition: background .18s ease, transform .18s ease;
}
.lib .lib-cta:hover,
.lib a.gumroad-button.lib-cta:hover{ background: var(--iterr-primary-deep, #D8862A) !important; transform: translateY(-1px); }

.lib .lib-cta-ghost,
.lib a.gumroad-button.lib-cta-ghost{
  background: transparent !important;
  color: var(--iterr-text, #1A1A1A) !important;
  border: 1px solid var(--iterr-border-strong, #DCD4C5) !important;
}
.lib .lib-cta-ghost:hover{ background: #fff !important; border-color: var(--iterr-text, #1A1A1A) !important; }
.lib section.lib-dark .lib-cta-ghost{ color:#fff !important; border-color: rgba(255,255,255,.35) !important; }
.lib section.lib-dark .lib-cta-ghost:hover{ background: rgba(255,255,255,.08) !important; }

.lib .lib-ctarow{ display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.2rem; }
.lib .lib-center .lib-ctarow{ justify-content: center; }

/* ---------- pills / meta ---------- */

.lib .lib-pills{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; padding: 0; list-style: none; }
.lib .lib-center .lib-pills{ justify-content: center; }
.lib .lib-pills li{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border: 1px solid var(--iterr-border, #EBE5DB); border-radius: 999px;
  background: #fff; font-size: .85rem; color: var(--iterr-text-muted, #5A5A5A);
}
.lib .lib-pills li::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lib-accent); display: inline-block; flex: none;
}

/* ---------- grid & kaarten ---------- */

.lib .lib-grid{ display: grid; gap: 1.4rem; }
.lib .lib-grid-2{ grid-template-columns: repeat(2, 1fr); }
.lib .lib-grid-3{ grid-template-columns: repeat(3, 1fr); }
.lib .lib-grid-4{ grid-template-columns: repeat(4, 1fr); }

.lib .lib-card{
  background: #fff; border: 1px solid var(--iterr-border, #EBE5DB); border-radius: 18px;
  padding: 1.85rem; display: flex; flex-direction: column; height: 100%;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lib .lib-card:hover{
  transform: translateY(-2px);
  box-shadow: rgba(20,15,5,.2) 0 16px 36px -22px;
  border-color: var(--iterr-border-strong, #DCD4C5);
}
.lib .lib-card h3{ margin-bottom: .55rem; }
.lib .lib-card p{ font-size: .95rem; margin-bottom: 1rem; }
.lib .lib-card p:last-child{ margin-bottom: 0; }
.lib .lib-card .lib-push{ margin-top: auto; padding-top: 1.2rem; }

.lib .lib-icon{
  width: 44px; height: 44px; border-radius: 12px; background: var(--lib-accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--lib-accent); font-size: 1.05rem; font-weight: 600; margin-bottom: 1.2rem; flex: none;
}

.lib .lib-tag{
  display: inline-block; background: var(--lib-accent-soft); color: var(--lib-accent);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem; white-space: nowrap;
  align-self: flex-start;   /* anders rekt hij uit in de flex-kolom van .lib-card */
}
.lib .lib-center .lib-tag{ align-self: center; }
.lib .lib-price{
  font-family: Newsreader, Georgia, serif; font-size: 1.9rem; font-weight: 600;
  color: var(--iterr-text, #1A1A1A); line-height: 1;
}
.lib .lib-price small{ font-family: Inter, sans-serif; font-size: .85rem; font-weight: 400; color: var(--iterr-text-faint, #8A8A8A); }
.lib .lib-strike{ text-decoration: line-through; color: var(--iterr-text-faint, #8A8A8A); font-size: 1.1rem; margin-right: .4rem; }

/* productkaart met gekleurde kop */
.lib .lib-product{ padding: 0; overflow: hidden; }
.lib .lib-product .lib-product-head{
  background: var(--lib-accent); color: #fff; padding: 1.6rem 1.85rem;
}
.lib .lib-product .lib-product-head h3{ color: #fff; margin: 0; }
.lib .lib-product .lib-product-head span{ display:block; font-family: Inter, sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; opacity: .8; margin-bottom: .5rem; }
.lib .lib-product .lib-product-body{ padding: 1.85rem; display: flex; flex-direction: column; flex: 1; }

/* ---------- lijsten ---------- */

.lib .lib-list{ list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lib .lib-list li{
  position: relative; padding-left: 1.7rem; margin-bottom: .7rem;
  font-size: .97rem; line-height: 1.55; color: var(--iterr-text-muted, #5A5A5A);
}
.lib .lib-list li::before{
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 8px; height: 8px; border-radius: 2px; background: var(--lib-accent);
}
.lib .lib-list strong{ color: var(--iterr-text, #1A1A1A); font-weight: 600; }

/* ---------- combideal-band ---------- */

.lib .lib-deal{
  background: var(--iterr-dark, #0E0E0E); color: #fff; border-radius: 22px;
  padding: 2.6rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center;
}
.lib .lib-deal h2, .lib .lib-deal h3{ color: #fff; }
.lib .lib-deal p{ color: rgba(255,255,255,.72); }
.lib .lib-deal .lib-price{ color: #fff; font-size: 2.6rem; }
.lib .lib-deal .lib-strike{ color: rgba(255,255,255,.45); }
.lib .lib-deal-buy{ text-align: right; }

/* ---------- tabel ---------- */

.lib .lib-table{ width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--iterr-border, #EBE5DB); }
.lib .lib-table th, .lib .lib-table td{ padding: .9rem 1.1rem; text-align: left; font-size: .95rem; border-bottom: 1px solid var(--iterr-border, #EBE5DB); }
.lib .lib-table th{ background: var(--lib-accent-soft); color: var(--lib-accent); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.lib .lib-table tr:last-child td{ border-bottom: 0; }
.lib .lib-table td:last-child, .lib .lib-table th:last-child{ text-align: right; white-space: nowrap; }
.lib .lib-tablewrap{ overflow-x: auto; }

/* prijsknopje in een tabelcel — Gumroad's eigen knopstijl overrulen */
.lib .lib-table a.gumroad-button,
.lib .lib-inline.gumroad-button{
  display: inline-block !important;
  background: var(--lib-accent-soft) !important;
  color: var(--lib-accent) !important;
  font: 600 .9rem/1 Inter, sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: .5rem .95rem !important; border-radius: 8px !important;
  border: 0 !important; box-shadow: none !important; text-decoration: none !important;
  height: auto !important; width: auto !important; max-width: none !important;
  transition: background .18s ease, color .18s ease;
}
.lib .lib-table a.gumroad-button:hover,
.lib .lib-inline.gumroad-button:hover{ background: var(--lib-accent) !important; color: #fff !important; }

/* ---------- FAQ ---------- */

.lib .lib-faq{ border-top: 1px solid var(--iterr-border, #EBE5DB); }
.lib .lib-faq details{ border-bottom: 1px solid var(--iterr-border, #EBE5DB); padding: 1.1rem 0; }
.lib .lib-faq summary{
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem;
  color: var(--iterr-text, #1A1A1A); display: flex; justify-content: space-between; gap: 1rem;
}
.lib .lib-faq summary::-webkit-details-marker{ display: none; }
.lib .lib-faq summary::after{ content: "+"; color: var(--lib-accent); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.lib .lib-faq details[open] summary::after{ content: "–"; }
.lib .lib-faq details p{ margin: .8rem 0 0; font-size: .97rem; }

/* ---------- kleine dingen ---------- */

.lib .lib-note{
  border-left: 3px solid var(--lib-accent); padding: .2rem 0 .2rem 1.1rem;
  font-size: .93rem; color: var(--iterr-text-muted, #5A5A5A);
}
.lib .lib-hr{ border: 0; border-top: 1px solid var(--iterr-border, #EBE5DB); margin: 3rem 0; }
.lib .lib-madewith{ font-size: .9rem; color: var(--iterr-text-faint, #8A8A8A); line-height: 1.6; }
.lib .lib-form{ background: #fff; border: 1px solid var(--iterr-border, #EBE5DB); border-radius: 18px; padding: 2rem; }
.lib .lib-form .wpcf7{ margin: 0; }
.lib .lib-form input[type=text], .lib .lib-form input[type=email], .lib .lib-form select{
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--iterr-border, #EBE5DB);
  border-radius: 9px; font: 400 .95rem Inter, sans-serif; background: #fff; margin: 0 0 .7rem;
}
.lib .lib-form input[type=submit]{
  background: var(--iterr-primary, #E89A3C); color: #fff; border: 0; border-radius: 10px;
  padding: .85rem 1.6rem; font: 500 1rem Inter, sans-serif; cursor: pointer;
}
.lib .lib-form input[type=submit]:hover{ background: var(--iterr-primary-deep, #D8862A); }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .lib .lib-grid-3, .lib .lib-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .lib .lib-deal{ grid-template-columns: 1fr; }
  .lib .lib-deal-buy{ text-align: left; }
}
@media (max-width: 620px){
  .lib section{ padding: 3.25rem 1.15rem; }
  .lib .lib-grid-2, .lib .lib-grid-3, .lib .lib-grid-4{ grid-template-columns: 1fr; }
  .lib .lib-card, .lib .lib-product .lib-product-body, .lib .lib-deal{ padding: 1.5rem; }
  .lib .lib-ctarow .lib-cta{ width: 100%; }
}