/*======================================
Theme Name: Free Divi Child Theme By Pee-Aye Creative
Theme URI: https://www.peeayecreative.com/
Description: This is a free Divi child theme from Pee-Aye Creative!
Author: Nelson Lee Miller (aka The Divi Teacher)
Author URI: https://www.peeayecreative.com/
Author Email: nelson@peeayecreative.com
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

 /* ===== NOTES ==================================================================
 * 
 * New to Divi? Take our full Divi course: https://www.peeayecreative.com/product/beyond-the-builder-the-ultimate-divi-website-course/
 * 
 * Learn cool tricks and features with our Divi tutorials: https://www.peeayecreative.com/blog/
 * 
 * Discover our premium Divi products: https://www.peeayecreative.com/shop/
 * 
 * =============================================================================== */

/*add your custom CSS below this line*/

.theater-agenda .agenda-row {
  display: grid;
  grid-template-columns: 120px 160px auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.theater-agenda .agenda-date { font-weight: 600; white-space: nowrap; opacity: 0.85; }

.theater-agenda .agenda-thumb img {
  display: block; width: 100%; height: auto; border-radius: 12px;
}

.theater-agenda .agenda-title { margin: 0 0 0.25rem; }

.theater-agenda .agenda-excerpt { margin: 0.25rem 0 0; opacity: 0.9; }

.theater-agenda .agenda-cta { display: inline-block; margin-top: 0.5rem; }

@media (max-width: 800px) {
  .theater-agenda .agenda-row { grid-template-columns: 100px auto; }
  .theater-agenda .agenda-thumb { grid-column: 1 / -1; order: 3; }
}

.agenda-status {
  display:inline-block; font-weight:600; font-size:0.875rem; line-height:1;
  padding:0.35rem 0.6rem; border-radius:9999px; background:rgba(0,0,0,0.06);
  margin:0.25rem 0 0.5rem;
}
.agenda-status--available { background:#43a047; color:#fff; }
.agenda-status--low       { background:#fb8c00; color:#fff; }
.agenda-status--soldout   { background:#e53935; color:#fff; }

/* Kaartje/rand */
.ag .ag-row{
  display:grid;
  grid-template-columns: 220px 180px auto 220px; /* thumb | datum | content | prijs/actie */
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0;
 /* border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
 */
  border-top: 1px solid rgba(255,255,255);
  border-bottom: 1px solid rgba(255,255,255);
}

/* Verticale scheidingslijnen (optioneel) */
/*.ag .ag-date{ border-left: 1px solid rgba(0,0,0,0.12); padding-left: 1.25rem; }
.ag .ag-main{ border-left: 1px solid rgba(0,0,0,0.12); padding-left: 1.25rem; }
.ag .ag-meta{ border-left: 1px solid rgba(0,0,0,0.12); padding-left: 1.25rem; }
*/
.ag .ag-date{ border-left: 1px solid rgba(255,255,255); padding-left: 1.25rem; }
.ag .ag-main{ border-left: 1px solid rgba(255,255,255); padding-left: 1.25rem; }
.ag .ag-meta{ border-left: 1px solid rgba(255,255,255); padding-left: 1.25rem; }

/* 1) Thumbnail altijd vierkant */
.ag .ag-thumb{ position:relative; display:block; overflow:hidden; border-radius:6px; background:#f3f3f3; }
.ag .ag-thumb::before{ content:""; display:block; padding-bottom:100%; } /* maakt 't vierkant */
.ag .ag-thumb img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.0); transition:transform 0.25s;
}
.ag .ag-row:hover .ag-thumb img{ transform:scale(1.03); }

/* 2) Datum typografie */
.ag .ag-date{ text-align:left; }
.ag .ag-date__weekday{ display:block; font-size:1rem; font-weight:600; opacity:0.9; margin-bottom:0.15rem; text-transform:lowercase; }
.ag .ag-date__day{ display:block; font-size:3.2rem; font-weight:900; line-height:1; }
.ag .ag-date__monthyear{ display:block; font-size:1rem; font-weight:600; margin:0.25rem 0 0.4rem; text-transform:lowercase; }
.ag .ag-date__time{ display:block; font-size:1.6rem; font-weight:800; }

/* 3) Content */
.ag .ag-title{ margin:0 0 0.3rem; font-size:1.8rem; line-height:1.2; }
.ag .ag-title a{ color:#fff; text-decoration:none; }
.ag .ag-title a:hover{ text-decoration:underline; }
/*.ag .ag-excerpt{ margin: 0.4rem 0 0; color:#222; opacity:0.95; }*/
.ag .ag-excerpt{ margin: 0.4rem 0 0; color:#fff; opacity:0.95; font-weight:200; }

/* 4) Meta (prijs + badge + knop rechts) */
.ag .ag-meta{ text-align:right; }
.ag .ag-price{ font-size:2rem; font-weight:800; margin: 0.2rem 0 1rem; }
.ag .ag-price del{ opacity:0.6; font-weight:600; }
.ag .ag-price ins{ text-decoration:none; }

/* Badges */
.ag .agenda-status{
  display:inline-block; font-weight:700; font-size:0.95rem; line-height:1;
  padding:0.5rem 0.8rem; border-radius:9999px; margin: 0.25rem 0 1rem;
  /*background: rgba(0,0,0,0.08);*/
	background:#6a1b9a;
}
.ag .agenda-status--available{ background:#43a047; color:#fff; }
.ag .agenda-status--low{ background:#fb8c00; color:#fff; }
.ag .agenda-status--soldout{ background:#e53935; color:#fff; }

/* Knop */
.ag .ag-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem; padding:0.7rem 1.1rem; border-radius:10px;
  background:#111; color:#fff; text-decoration:none; font-weight:700;
  border:2px solid #111;
}
.ag .ag-btn:hover{ background:#fff; color:#111; }

/* Responsief */
@media (max-width: 1000px){
  .ag .ag-row{ grid-template-columns: 160px 160px auto; }
  .ag .ag-meta{ align-self: start; }
}
@media (max-width: 800px){
  .ag .ag-row{ grid-template-columns: 120px auto; gap: 0.9rem; }
  .ag .ag-date, .ag .ag-main, .ag .ag-meta{ border-left:none; padding-left:0; }
  .ag .ag-meta{ grid-column: 1 / -1; text-align:left; margin-top:0.5rem; }
  .ag .ag-price{ margin: 0.2rem 1rem 0.6rem 0; display:inline-block; }
  .ag .ag-btn{ margin-left: 0.6rem; }
}

/* Knop/prijs dimmen bij soldout */
.ag .agenda-status--soldout + .ag-btn{
  opacity:0.5; pointer-events:none; cursor:not-allowed; filter:grayscale(30%);
}
.ag .agenda-status--soldout ~ .ag-btn,
.ag .agenda-status--soldout ~ .ag-price{ opacity:0.4; }

/* Diagonale "Besloten" ribbon op de thumbnail */
.ag .ag-row--private .ag-thumb{ position:relative; }
.ag .ag-row--private .ag-thumb::after{
  content:"Besloten";
  position:absolute;
  top:12px; left:-44px;
  width:180px; text-align:center;
  font-weight:800; font-size:0.9rem; letter-spacing:0.02em;
  color:#fff; background:#6a1b9a;
  padding:0.45rem 0;
  transform:rotate(-45deg);
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  z-index:2; pointer-events:none; opacity:0.95;
}

/* Kleinere schermen */
@media (max-width: 800px){
  .ag .ag-row--private .ag-thumb::after{
    top:10px; left:-40px; width:160px; padding:0.35rem 0; font-size:0.85rem;
  }
}

/* layout voor mobiel */

/* ===== Mobile layout tweaks (<= 680px) ===== */
@media (max-width: 680px){
  /* Grid compacter */
  .ag .ag-row{
    grid-template-columns: 120px auto;
    gap: 0.75rem;
  }

  /* Thumb blijft 120x120 vierkant (zoals nu) */
  .ag .ag-thumb{ border-radius: 10px; }
  .ag .ag-thumb::before{ padding-bottom: 100%; }

  /* Datum rechts van de foto, rechts uitgelijnd en niet hoger dan de foto */
  .ag .ag-date{
    grid-column: 2; grid-row: 1;
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
    max-height: 120px; overflow: hidden;
    padding-left: 0; border-left: 0;         /* verticale lijn weg op mobiel */
  }
  .ag .ag-date__weekday{ font-size: 0.85rem; margin-bottom: 0.1rem; opacity: 0.9; }
  .ag .ag-date__day{ font-size: 2.2rem; line-height: 1; }
  .ag .ag-date__monthyear{ font-size: 0.85rem; margin: 0.2rem 0 0.3rem; }
  .ag .ag-date__time{ font-size: 1.1rem; }

  /* Content komt onder de datum */
  .ag .ag-main{
    grid-column: 1 / -1;
    border-left: 0; padding-left: 0;
  }

  /* Titel kleiner + maximaal 2 regels */
  .ag .ag-title{ margin: 0 0 0.25rem; font-size: 1.25rem; line-height: 1.2; }
  .ag .ag-title a{
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Omschrijving: kies één van de twee ↓ */

  /* A) Helemaal verbergen op mobiel */
  /* .ag .ag-excerpt{ display: none; } */

  /* B) Maximaal 3 regels + ellipsis */
  .ag .ag-excerpt{
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 0.3rem;
  }

  /* Venue/adres iets compacter */
  .ag .ag-venue{ margin: 0.1rem 0 0.1rem; }
  .ag .ag-venue-address{ margin: 0 0 0.3rem; }

  /* Rechterkolom onderaan: alles op één regel */
  .ag .ag-meta{
    grid-column: 1 / -1;
    border-left: 0; padding-left: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; margin-top: 0.4rem; text-align: left;
  }
  .ag .ag-price{ margin: 0; font-size: 1.4rem; font-weight: 800; }
  .ag .agenda-status{ margin: 0; font-size: 0.8rem; padding: 0.4rem 0.6rem; }
  .ag .ag-btn{ padding: 0.55rem 0.8rem; font-size: 0.9rem; }

  /* Zorg dat sold-out dimming nog klopt in flexrij */
  .ag .agenda-status--soldout + .ag-btn{ opacity: 0.5; pointer-events: none; }
}

/* Ribbon blijft prima werken op mobiel; desnoods iets kleiner maken */
@media (max-width: 680px){
  .ag .ag-row--private .ag-thumb::after{
    top: 10px; left: -38px; width: 160px; padding: 0.35rem 0; font-size: 0.85rem;
  }
}