/* Country Lawns — Before & After. Uses the theme's global CSS variables. */

.ba-section{background:var(--paper)}

/* Grid container — columns + spacing come from modifier classes (Display Settings) */
.ba-grid{display:grid;margin:0 auto}
.ba-grid.ba-cols-1{grid-template-columns:1fr;max-width:1500px}   /* full width — one pair per row */
.ba-grid.ba-cols-2{grid-template-columns:repeat(2,1fr);max-width:880px}
.ba-grid.ba-cols-3{grid-template-columns:repeat(3,1fr);max-width:1280px}
.ba-grid.ba-cols-4{grid-template-columns:repeat(4,1fr);max-width:1600px}   /* 4 pairs across, one row */
.ba-gap-tight{gap:14px}
.ba-gap-comfortable{gap:30px 28px}
.ba-gap-spacious{gap:54px 44px}

/* Card wraps a pair and links to its own page */
.ba-card{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit;cursor:pointer;transition:transform .35s var(--ease,ease)}
.ba-card:hover{transform:translateY(-4px)}
.ba-card:hover .ba-split{box-shadow:0 30px 56px -26px rgba(15,61,42,0.45)}
.ba-card:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

/* "Show more" is a PHONE-only affordance — desktop & tablet always show every pair
   (the collapse + button only activate in the ≤620px block below). */
.ba-more-wrap{display:none;text-align:center;margin-top:38px}

/* The before/after split — shared by card, single page and in-post embed */
.ba-split{display:flex;width:100%;background:var(--paper-warm);overflow:hidden;border:1px solid rgba(182,139,60,0.4);border-radius:8px;box-shadow:0 22px 44px -26px rgba(15,61,42,0.3)}
.ba-half{position:relative;flex:1 1 50%;margin:0;overflow:hidden;aspect-ratio:3/2}
.ba-half + .ba-half{border-left:3px solid var(--paper)}
.ba-half img{width:100%;height:100%;object-fit:cover;display:block}
.ba-half figcaption{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--display);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;font-size:0.64rem;padding:5px 11px;background:rgba(8,33,23,0.82);color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ba-half:last-child figcaption{left:auto;right:14px;background:var(--gold);color:var(--ink-deep)}

/* Image shape (set per half so it scales with the column width) */
.ba-shape-32 .ba-half{aspect-ratio:3/2}
.ba-shape-169 .ba-half{aspect-ratio:16/9}
.ba-shape-square .ba-half{aspect-ratio:1/1}

/* Labels off */
.ba-no-labels figcaption{display:none}

/* Quote */
.ba-quote{margin:0;text-align:center;padding:0 8px}
.ba-quote p{font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.5;color:var(--ink);margin:0 0 9px}
.ba-quote p::before{content:"\201C"}
.ba-quote p::after{content:"\201D"}
.ba-quote cite{display:block;font-family:var(--display);font-style:normal;letter-spacing:0.14em;text-transform:uppercase;font-size:0.7rem;font-weight:600;color:var(--gold)}

/* Full-width pairs get larger captions / quote */
.ba-cols-1 .ba-half figcaption,.ba-single-split .ba-half figcaption,.ba-embed .ba-half figcaption{top:18px;left:18px;font-size:0.72rem;padding:6px 14px}
.ba-cols-1 .ba-half:last-child figcaption,.ba-single-split .ba-half:last-child figcaption,.ba-embed .ba-half:last-child figcaption{left:auto;right:18px}
/* Small (multi-column) grid cards: BEFORE/AFTER label is a full-width bar across the
   top of each image, with the text pinned into the corner. */
.ba-cols-2 .ba-half figcaption,.ba-cols-3 .ba-half figcaption,.ba-cols-4 .ba-half figcaption{top:0;left:0;right:0;text-align:left;padding:7px 14px;background:linear-gradient(135deg,rgba(8,33,23,0.88) 0%,rgba(8,33,23,0.82) 30%,rgba(8,33,23,0) 88%);-webkit-backdrop-filter:none;backdrop-filter:none}
.ba-cols-2 .ba-half:last-child figcaption,.ba-cols-3 .ba-half:last-child figcaption,.ba-cols-4 .ba-half:last-child figcaption{left:0;right:0;text-align:right;background:linear-gradient(225deg,rgba(182,139,60,0.96) 0%,rgba(182,139,60,0.92) 30%,rgba(182,139,60,0) 88%)}
.ba-cols-1 .ba-quote{margin-top:6px}
.ba-cols-1 .ba-quote p{font-size:1.22rem}

/* Responsive: multi-column layouts collapse; full-width stays one per row */
@media (max-width:1024px){.ba-grid.ba-cols-3,.ba-grid.ba-cols-4{grid-template-columns:repeat(2,1fr);max-width:820px}}
/* Portrait phones: every layout becomes a single column (overrides cols + collapsed) */
@media (max-width:620px){
  .ba-grid{grid-template-columns:1fr!important;max-width:520px}
  .ba-half figcaption{top:10px;left:10px;font-size:0.55rem;padding:4px 8px;letter-spacing:0.1em}
  .ba-half:last-child figcaption{right:10px}
  /* Phone only: collapse to the first N pairs + reveal the Show more button */
  .ba-grid.ba-collapsed .ba-extra{display:none}
  .ba-more-wrap{display:block;margin-top:28px}
}

/* Single entry page + in-post embed */
.ba-single-inner{max-width:1180px;margin:0 auto}
.ba-single-split{margin:0 auto}
.ba-single-quote{max-width:760px;margin:34px auto 0}
.ba-single-quote p{font-size:1.4rem}
.ba-single-content{max-width:760px;margin:30px auto 0;font-family:var(--serif);font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.ba-single-content p{margin:0 0 18px}
.ba-single-back{max-width:760px;margin:34px auto 0}
.ba-single-back a{font-family:var(--display);letter-spacing:0.12em;text-transform:uppercase;font-size:0.78rem;font-weight:600;color:var(--gold);text-decoration:none}
.ba-embed{margin:28px 0}
.ba-embed .ba-quote{max-width:680px;margin:20px auto 0}

/* Lightbox modal (opened by clicking a grid pair) */
.ba-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px}
.ba-modal.is-open{display:flex}
.ba-modal-backdrop{position:absolute;inset:0;background:rgba(8,33,23,0.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ba-modal-dialog{position:relative;z-index:1;width:100%;max-width:1200px;max-height:92vh;overflow:auto;background:var(--paper,#f7f4ec);padding:16px;box-shadow:0 40px 90px -28px rgba(0,0,0,0.6)}
.ba-modal-close{position:absolute;top:6px;right:12px;z-index:3;background:none;border:none;font-size:2.1rem;line-height:1;cursor:pointer;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.6)}
.ba-modal-split{display:flex;width:100%;background:#0a0a0a}
.ba-modal-split figure{position:relative;flex:1 1 50%;margin:0;min-width:0}
.ba-modal-split figure + figure{border-left:3px solid var(--paper,#f7f4ec)}
.ba-modal-split img{width:100%;max-height:78vh;object-fit:contain;display:block;background:#0a0a0a}
.ba-modal-split figcaption{position:absolute;top:14px;left:14px;font-family:var(--display);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;font-size:0.7rem;padding:5px 12px;background:rgba(8,33,23,0.82);color:#fff}
.ba-modal-split figure:last-child figcaption{left:auto;right:14px;background:var(--gold);color:var(--ink-deep)}
.ba-modal-quote{margin:18px auto 0;max-width:760px;text-align:center}
.ba-modal-quote p{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--ink);margin:0 0 8px}
.ba-modal-quote cite{font-family:var(--display);font-style:normal;letter-spacing:0.14em;text-transform:uppercase;font-size:0.72rem;color:var(--gold)}
.ba-modal-link{display:block;text-align:center;margin:16px auto 4px;font-family:var(--display);letter-spacing:0.12em;text-transform:uppercase;font-size:0.75rem;font-weight:600;color:var(--gold);text-decoration:none}
@media (max-width:700px){
  .ba-modal-split{flex-direction:column}
  .ba-modal-split figure + figure{border-left:none;border-top:3px solid var(--paper,#f7f4ec)}
  .ba-modal-split img{max-height:42vh}
}