/* Course tiles — shared by the home page and the Courses page.
   Content lives in assets/courses.js; edit it there once. */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1020px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--white);border:1px solid var(--line);position:relative;
  display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:13px;padding-bottom:24px}
.card.best{border-color:var(--marigold)}
.card .thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:9px}
.card .body{display:contents}
.card .body>*{margin-inline:22px}
.card .lvl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--slate)}
.card .lvl b{color:var(--marigold-dk);font-weight:500}
.card h3{font-size:22px;line-height:1.15}
.card .price{display:flex;align-items:baseline;gap:10px;font-family:var(--mono)}
.card .price .v{font-size:23px;font-weight:500}
.card .price .v.freec{color:var(--green)}
.card .price s{font-size:13px;color:var(--slate)}
.card .price s.plain{text-decoration:none}
.card .who{font-size:14px;color:var(--slate);line-height:1.5}
.card .rule{height:1px;background:var(--marigold);align-self:start}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5;align-self:start}
.card li{display:flex;gap:10px}
.card li::before{content:"◆";color:var(--marigold);font-size:10px;margin-top:5px}
.card .cta{display:flex;justify-content:center;align-items:center;text-align:center;min-height:48px;padding:8px 10px;text-decoration:none;font-weight:600;font-size:14px;border:1.5px solid var(--navy);background:var(--white);color:var(--navy);align-self:end}
.card .cta:hover{background:var(--navy);color:#fff}
.card.best .cta{background:var(--marigold);border-color:var(--marigold)}
.card.best .cta:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* full-width tile (Workshop on the Courses page): picture left, details right */
.card.wide{grid-column:1/-1;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,2fr) minmax(0,3fr);padding-bottom:0}
.card.wide .thumb{height:100%;margin:0;object-fit:contain;background:var(--navy)}
.card.wide .body{display:flex;flex-direction:column;gap:13px;padding:24px 26px}
.card.wide .body>*{margin-inline:0}
.card.wide ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}
.card.wide .cta{align-self:start;min-width:240px;margin-top:auto}
@media (max-width:720px){
  .card.wide{grid-template-columns:1fr}
  .card.wide .thumb{height:auto}
  .card.wide ul{grid-template-columns:1fr}
  .card.wide .cta{align-self:stretch}
}

/* older browsers without subgrid: plain stacked cards */
@supports not (grid-template-rows:subgrid){
  .card{display:flex;flex-direction:column;padding-bottom:0}
  .card .thumb{margin:0}
  .card .body{display:flex;flex-direction:column;gap:13px;padding:22px 22px 24px;flex:1}
  .card .body>*{margin-inline:0}
  .card ul{flex:1}
  .card.wide{display:grid}
}