/* ============================================================
   PADEL CLUB BONAIRE · page-specific styles
   ============================================================ */

/* ---------- editorial feature rows (legacy, still used on some pages) ---------- */
.rows{margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line)}
.frow{
  display:grid;grid-template-columns:88px 1.05fr .95fr;gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3vw,34px) 2px;border-bottom:1px solid var(--line);align-items:start;
}
.frow i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--pink)}
.frow h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);letter-spacing:.02em;line-height:1.05}
.frow p{color:rgba(12,18,64,.8);font-size:15.5px;max-width:52ch}
@media(max-width:799px){.frow{grid-template-columns:58px 1fr}.frow p{grid-column:2}}

/* ---------- legacy feature cards ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,4vw,48px)}
@media(max-width:1023px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:599px){.fgrid{grid-template-columns:1fr}}
.fcard{border:1px solid var(--line);background:#fff;padding:22px 20px}
.fcard svg{width:30px;height:30px;color:var(--royal);margin-bottom:16px}
.fcard h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.02em;margin-bottom:8px}
.fcard p{font-size:14.5px;color:rgba(12,18,64,.78)}
.fnote{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(12,18,64,.55)}

/* ---------- legacy island band ---------- */
.island{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:899px){.island{grid-template-columns:1fr}}
.island__art{border:1px solid var(--wline);aspect-ratio:4/3;position:relative;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
.island__art svg{width:62%;color:#fff}
.island__art .tag{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ---------- members (legacy cards) ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,4vw,44px)}
@media(max-width:899px){.benefits{grid-template-columns:1fr}}
.bcard{border:1px solid var(--line);background:#fff;padding:26px 22px;border-bottom:3px solid var(--royal)}
.bcard i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--pink)}
.bcard h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:18px;margin:14px 0 8px}
.bcard p{font-size:14.5px;color:rgba(12,18,64,.78)}

.faq{margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:19px 2px;font-family:var(--disp);font-stretch:115%;font-weight:700;font-size:17px;letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:19px;color:var(--royal);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2px 20px;color:rgba(12,18,64,.8);max-width:70ch;font-size:15.5px}

/* ---------- updates journal ---------- */
.jrow{display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,3vw,44px);padding:clamp(26px,4vw,44px) 0;border-top:1px solid var(--line)}
@media(max-width:799px){.jrow{grid-template-columns:1fr}}
.jrow__meta .mono{color:rgba(12,18,64,.55);display:block;margin-bottom:8px}
.jrow h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:1.02;margin-bottom:16px}
.jrow p{color:rgba(12,18,64,.82);max-width:64ch}
.jrow p + p{margin-top:12px}
.jrow__img{margin-top:22px;border:1px solid var(--line);background:#fff;padding:10px;max-width:460px}
.jrow__img img{width:100%;height:auto}
.jrow__img figcaption{padding:10px 4px 2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(12,18,64,.55)}
.jquote{border-left:3px solid var(--pink);padding:4px 0 4px 20px;margin-top:18px;font-size:17px;line-height:1.6;color:var(--navy);max-width:60ch}

.nups{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:899px){.nups{grid-template-columns:1fr 1fr}}
@media(max-width:559px){.nups{grid-template-columns:1fr}}
.nup{border:1px dashed var(--line-2);padding:20px;min-height:132px;display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.nup i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:rgba(12,18,64,.55)}
.nup h4{font-family:var(--disp);font-stretch:115%;font-weight:750;text-transform:uppercase;font-size:15.5px;letter-spacing:.02em;color:rgba(12,18,64,.8);margin:0}
.nup .chip{align-self:flex-start;color:rgba(12,18,64,.55);border-color:var(--line)}

.pnote{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(12,18,64,.55)}

/* ============================================================
   creative layout additions
   ============================================================ */

/* side-by-side panels (the frame language) */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,36px);align-items:stretch}
@media(max-width:899px){.panels{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);background:#fff;padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:16px}
.panel--royal{background:var(--royal);border-color:var(--royal);color:#fff}
.panel--center{align-items:center;justify-content:center;text-align:center}
.panel .bigflam{width:min(210px,64%);margin:auto;color:var(--navy)}
.panel--royal .bigflam{color:#fff}
.panel .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.panel h3{font-family:var(--disp);font-stretch:118%;font-weight:820;text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);line-height:1.05;margin:0}
.panel p{font-size:15px;color:rgba(12,18,64,.8);margin:0}
.panel--royal p{color:rgba(255,255,255,.85)}
.panel .pnote{margin:0}

/* simple icon rows (club: what we are building) */
.srows{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line)}
.srow svg{width:28px;height:28px;color:var(--royal)}
.srow h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.8vw,20px);letter-spacing:.02em;margin:0 0 6px}
.srow p{font-size:14.5px;color:rgba(12,18,64,.78);max-width:48ch;margin:0}

/* member benefit rows */
.mrows{border-top:1px solid var(--line)}
.mrow{padding:22px 2px;border-bottom:1px solid var(--line)}
.mrow .tickline{display:block;width:34px;height:3px;background:var(--pink);margin-bottom:14px}
.mrow h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(18px,2vw,24px);margin:0 0 8px}
.mrow p{font-size:15px;color:rgba(12,18,64,.78);max-width:52ch;margin:0}

/* sticky two-column blocks */
.stickcol{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(22px,3.4vw,56px);align-items:start}
@media(max-width:899px){.stickcol{grid-template-columns:1fr}}
.stickcol .stick{position:sticky;top:24px}
@media(max-width:899px){.stickcol .stick{position:static}}

/* FAQ two-column */
.faqq{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(22px,3.4vw,56px);align-items:start}
@media(max-width:899px){.faqq{grid-template-columns:1fr}}
.faqq .faq{margin-top:0}

/* play bento: court zones */
.bento{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);background:#fff;margin-top:clamp(26px,4vw,44px)}
.zcell{
  padding:clamp(20px,2.6vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:205px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.zcell h3{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(18px,2vw,24px);letter-spacing:.02em;margin:auto 0 0}
.zcell p{font-size:14px;color:rgba(12,18,64,.75);max-width:44ch;margin:0;transition:color .35s var(--ease)}
.zcell .zl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);transition:color .35s var(--ease)}
.zcell .ztick{width:11px;height:11px;background:var(--pink);transition:transform .35s var(--ease)}
.zcell:hover{background:var(--royal);color:#fff}
.zcell:hover p{color:rgba(255,255,255,.85)}
.zcell:hover .zl{color:var(--pink)}
.zcell:hover .ztick{transform:scale(1.5)}
.z2{grid-column:span 2}.z3{grid-column:span 3}
.zcell:nth-child(2){border-right:0}
.zcell:nth-child(n+3){border-bottom:0}
@media(max-width:899px){
  .bento{grid-template-columns:1fr}
  .zcell{border-right:0;min-height:0;border-bottom:1px solid var(--line)}
  .zcell:last-child{border-bottom:0}
}