/* FunnyDivers - single course detail page (en/course/<slug>).

   Deliberately built on top of dive-sites.css + reef.css rather than beside
   them: a course page and a dive site page are the same shape of document, so
   the hero, the numbered article blocks and the sticky sidebar are reused as
   they are. What is added here is only what a course has and a reef does not -
   a price, a list of what is included, and the path through the certifications. */

/* ---------- hero additions ---------- */
.reef-hero .cp-price-chip{background:rgba(255,212,0,.16);border-color:rgba(255,212,0,.45);color:#ffe98a;font-weight:800;}

/* ---------- what's included ---------- */
.cp-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 20px;margin-top:6px;}
.cp-inc .inc-item{display:flex;align-items:flex-start;gap:10px;color:#2e5860;font-size:14.5px;line-height:1.5;}
.cp-inc .inc-item .icon{width:17px;height:17px;stroke:var(--teal,#0eb6a8);fill:none;stroke-width:2.5;flex:none;margin-top:3px;}

/* ---------- sidebar price card ---------- */
.cp-price{background:linear-gradient(160deg,#063744 0%,#02222c 100%);border-radius:20px;padding:22px 22px 20px;
  color:#fff;box-shadow:0 18px 40px rgba(2,40,50,.28);margin-bottom:18px;}
.cp-price .cp-price-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,#FFD400);margin-bottom:8px;}
.cp-price .cp-price-amount{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:'Fredoka',sans-serif;font-size:38px;font-weight:700;line-height:1;}
.cp-price .cp-price-amount small{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.62);letter-spacing:0;}
.cp-price .cp-price-note{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.66);}
.cp-price .btn{width:100%;justify-content:center;margin-top:16px;}

/* ---------- transfer / small print ---------- */
.cp-fine{margin-top:14px;padding-top:14px;border-top:1px solid #e2f1ee;font-size:12.5px;line-height:1.6;color:#6d8f95;}
.cp-fine b{color:#2e5860;}

/* ---------- the certification path ---------- */
/* A horizontal ladder on wide screens, a vertical one on narrow. The step the
   reader is on is filled in; everything before and after it stays outlined, so
   the page answers "where am I" without a caption saying so. */
.cp-path{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.cp-step{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border-radius:999px;
  background:#fff;border:1.5px solid #d9edea;color:#3c6a71;font-size:13.5px;font-weight:700;
  transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s,background .25s;}
a.cp-step:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,40,50,.12);border-color:var(--teal,#0eb6a8);}
.cp-step i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:#eaf7f5;color:var(--teal,#0eb6a8);font-style:normal;font-size:11.5px;font-weight:800;}
.cp-step.is-here{background:var(--teal,#0eb6a8);border-color:var(--teal,#0eb6a8);color:#fff;cursor:default;}
.cp-step.is-here i{background:rgba(255,255,255,.24);color:#fff;}

/* ---------- more courses ---------- */
.cp-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.cp-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2f1ee;border-radius:20px;
  overflow:hidden;box-shadow:0 8px 24px rgba(2,40,50,.07);
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .3s;}
.cp-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(2,40,50,.16);border-color:#c6e6e0;}
.cp-card-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dceceb;}
.cp-card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,.8,.3,1);}
.cp-card:hover .cp-card-photo img{transform:scale(1.06);}
.cp-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;}
.cp-card-body h3{font-family:'Fredoka',sans-serif;font-size:17px;color:var(--navy,#052a35);margin:0;line-height:1.25;}
/* Taglines vary from one line to three; clamping keeps a row of cards level
   without forcing every tagline to be written to the same length. */
.cp-card-body p{font-size:13.5px;line-height:1.5;color:#5c8189;margin:0;flex:1 1 auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.cp-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;}
.cp-card-price{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;color:var(--teal,#0eb6a8);}
.cp-card-dur{font-size:12px;font-weight:700;color:#7d9ba1;}

@media(max-width:600px){
  .cp-price .cp-price-amount{font-size:32px;}
  .cp-inc{grid-template-columns:1fr;}
}