/* ============================================================
   Tribal Kite School — kitesurfing lessons
   Only what is unique to this page. Everything else comes
   from assets/css/page-kit.css.
   ============================================================ */

.kin__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,3.6vw,56px)}
.kin__t{display:flex;align-items:center;gap:12px;font-family:var(--r-mono);font-size:10px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold);margin:0 0 22px}
.kin__t::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(245,184,46,.3),transparent)}
.kin__list{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(18px,2.4vw,40px)}
.kin__list--2{grid-template-columns:1fr 1fr}
.kin__list li{display:flex;align-items:center;gap:13px;padding:12px 2px;
  border-bottom:1px solid var(--k-line);font-size:13px;line-height:1.4;
  color:var(--k-body);transition:color .28s,border-color .28s}
.kin__list li:hover{color:var(--k-ink);border-color:var(--k-line2)}
.kin__list svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--k-gold);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s}
.kin__list li:hover svg{transform:translateX(2px)}
.kin__bring{border-left:1px solid var(--k-line);padding-left:clamp(28px,3.4vw,52px)}
@media(max-width:1040px){
  .kin__grid{grid-template-columns:1fr;gap:32px}
  .kin__bring{border-left:0;padding-left:0;border-top:1px solid var(--k-line);padding-top:32px}
  .kin__bring .kin__list{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.kin__list--2,.kin__bring .kin__list{grid-template-columns:1fr}}

/* The rentals list (.krent, .ki__list, .ki__gear, .ki__name, .ki__rate)
   moved to page-kit.css on 2026-09-09: suplesson.php prints the same
   list and does not load this sheet, so its rows came out unstyled. */

/* ============================================================
   INTERACTION
   Motion is deliberate and short; everything is disabled for
   visitors who ask for reduced motion.
   ============================================================ */


/* pricing cards tilt toward the pointer, as the home page cards do */
.kc__card{will-change:transform}
.kc__card.is-tilt{transition:transform .12s ease-out,box-shadow .35s}


/* rental rows slide their name a touch on hover */
.ki__list li .ki__name{transition:transform .28s,color .28s}
.ki__list li:hover .ki__name{transform:translateX(3px);color:var(--k-gold)}

/* trust items lift their label */
.ktr__it b{transition:color .3s}
.ktr__it:hover b{color:var(--k-gold)}

/* focus states everywhere, matching the gold accent */
.kp-page a:focus-visible,.kp-page button:focus-visible{
  outline:2px solid var(--k-gold);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  .kc__card,.kc__card.is-tilt{transition:none!important;transform:none!important}
  .kl__card img,.ki__ph img{transition:none}
}


/* ============ ZONJEE CARD INSIDE THE RENTALS SECTION ============ */
.krent__grid{display:grid;grid-template-columns:1fr clamp(240px,26vw,310px);
  gap:clamp(28px,4vw,56px);align-items:start;max-width:1060px;margin:36px auto 0}
.zcard{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--k-line);background:rgba(214,232,235,.03)}
.kp-sec--light .zcard{background:#fff;border-color:rgba(6,19,27,.10);
  box-shadow:0 16px 38px rgba(6,19,27,.09)}
.zcard__ph{position:relative;aspect-ratio:4/5;overflow:hidden}
.zcard__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.zcard:hover .zcard__ph img{transform:scale(1.05)}
.zcard__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,35,0) 48%,rgba(3,25,35,.86) 100%)}
.zcard__tag{position:absolute;left:16px;top:16px;z-index:1;font-family:var(--r-mono);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#06131B;background:var(--k-gold);padding:5px 11px;border-radius:999px}
.zcard__over{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 18px 16px}
.zcard__over h3{font-family:var(--r-display);font-weight:640;font-size:26px;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;margin:0 0 5px;color:#F4F0E8}
.zcard__over p{font-family:var(--r-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-gold);margin:0}
.zcard__body{padding:18px 18px 20px}
.zcard__body p{font-size:13px;line-height:1.66;color:var(--k-body);margin:0 0 16px}
.zcard__body .r-pill{width:100%;justify-content:center;padding:11px 14px;font-size:11px}
@media(max-width:900px){
  .krent__grid{grid-template-columns:1fr;gap:34px}
  .zcard{max-width:340px;margin-inline:auto}
}

/* ============================================================
   IKO LESSON PLAN — the official skills matrix, rebuilt in the
   site palette. The source posters are IKO-branded orange/green,
   which fights the navy and gold, so the content is reproduced as
   type. The original sheets stay available underneath.
   ============================================================ */
.lvl{display:grid;gap:0;margin-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--k-line)}
.lvl__row{border-bottom:1px solid var(--k-line)}

.lvl__head{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:clamp(14px,2vw,26px);padding:clamp(18px,2vw,24px) 2px;transition:color .3s}
.lvl__head::-webkit-details-marker{display:none}
/* the level's photograph on the closed row: small, but a photograph */
.lvl__thumb{flex:0 0 auto;width:clamp(72px,9vw,120px);aspect-ratio:3/2;
  border-radius:7px;overflow:hidden;border:1px solid var(--k-line);background:#0B2029}
.lvl__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lvl__head:hover .lvl__thumb img{transform:scale(1.06)}
.lvl__head:hover .lvl__name{color:var(--k-gold)}
.lvl__count{margin-left:auto;font-family:var(--r-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--k-mute)}
.lvl__head::after{content:"";flex:0 0 10px;width:10px;height:10px;
  border-right:1.6px solid var(--k-gold);border-bottom:1.6px solid var(--k-gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.lvl__row[open] .lvl__head::after{transform:rotate(-135deg) translateY(-2px)}
.lvl__n{font-family:var(--r-display);font-size:clamp(24px,2.6vw,34px);line-height:1;
  color:var(--k-gold);opacity:.85;flex:0 0 auto}
.lvl__name{font-family:var(--r-display);font-size:clamp(19px,2.1vw,26px);line-height:1.15;
  color:var(--k-ink);margin:0;transition:color .3s}
.lvl__badge{flex:0 0 auto;font-family:var(--r-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--k-gold);
  border:1px solid rgba(245,184,46,.4);border-radius:2px;padding:5px 10px}
/* the three official IKO sheets, re-skinned into the palette and set in a
   card frame so they read as ours rather than as a pasted-in PDF page */
.iko{display:flex;align-items:center;gap:clamp(22px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(28px,3.2vw,40px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--k-line)}
.iko__label{font-family:var(--r-mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-body);max-width:20ch;line-height:1.7}
.iko__row{flex:1 1 460px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px)}
.iko__sheet{display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,#0A2029 0%,#061620 100%);
  border:1px solid rgba(245,184,46,.30);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s}
.iko__sheet:hover{transform:translateY(-5px);border-color:rgba(245,184,46,.72);
  box-shadow:0 26px 56px -18px rgba(0,0,0,.7),0 0 0 1px rgba(245,184,46,.15)}
.iko__ttl{display:block;padding:9px 10px 8px;text-align:center;line-height:1.55;
  font-family:var(--r-mono);font-size:8px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--k-mute)}
.iko__ttl b{display:block;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--k-gold)}
.iko__grid{display:block;background:#EDE7DB}
.iko__grid img{width:100%;height:auto;display:block}
.iko__foot{display:block;padding:5px 11px;text-align:right;
  background:linear-gradient(90deg,rgba(245,184,46,.42) 0%,var(--k-gold) 58%);
  font-family:var(--r-mono);font-size:9.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#06131B}

@media(max-width:760px){
  .lvl__head{flex-wrap:wrap;gap:10px 14px}
  .lvl__count{margin-left:0;width:100%;order:3}
  /* three sheets side by side stop being readable well before this */
  .iko__row{grid-template-columns:1fr;max-width:340px}
  .lvl__head::after{margin-left:auto}
}

/* ============================================================
   THE IKO COLLAGE, RETHEMED
   The official sheets are a grid of orange caption bars over
   photographs. Same grid, same photographs, same captions —
   rebuilt in navy, ivory and gold so it belongs to this page
   instead of fighting it.
   ============================================================ */
.ikc{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:clamp(12px,1.4vw,20px);margin:0;padding:4px 0 clamp(26px,3vw,38px);
  list-style:none}
.ikc__card{position:relative;display:flex;flex-direction:column;
  border-radius:10px;overflow:hidden;background:rgba(214,232,235,.035);
  border:1px solid var(--k-line);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,background .35s}
.ikc__card:hover{transform:translateY(-4px);border-color:rgba(245,184,46,.42);
  background:rgba(214,232,235,.06)}
.kp-sec--light .ikc__card{background:#fff;border-color:rgba(6,19,27,.10)}
.kp-sec--light .ikc__card:hover{background:#fff;border-color:rgba(184,135,26,.45)}

.ikc__ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:#0B2029}
.ikc__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ikc__card:hover .ikc__ph img{transform:scale(1.055)}
/* the source frames are low-resolution scans; a whisper of contrast and a
   navy veil settle them into the palette without hiding anything */
.ikc__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,25,35,.06) 0%,rgba(3,25,35,.30) 100%);
  transition:opacity .35s}
.ikc__card:hover .ikc__ph::after{opacity:.45}

/* the level cover: one real photograph, two cells wide and two tall,
   with the level's purpose set over its foot */
.ikc__card--cover{grid-column:span 2;grid-row:span 2;min-height:300px;
  border-color:rgba(245,184,46,.34)}
.ikc__card--cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.ikc__card--cover:hover img{transform:scale(1.04)}
.ikc__card--cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,25,35,0) 38%,rgba(3,25,35,.88) 100%)}
.ikc__cover{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(14px,1.6vw,20px)}
.ikc__cover b{display:block;font-family:var(--r-mono);font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--k-gold);margin-bottom:7px}
.ikc__cover span{display:block;font-size:13px;line-height:1.6;color:#F4F0E8}
@media(max-width:380px){
  .ikc__card--cover{grid-column:span 1;grid-row:span 1;min-height:220px}
}

.ikc__body{display:flex;align-items:flex-start;gap:9px;
  padding:11px clamp(10px,1vw,13px) 13px}
.ikc__code{flex:0 0 auto;font-family:var(--r-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;color:var(--k-gold);
  border:1px solid rgba(245,184,46,.34);border-radius:3px;padding:3px 6px;
  line-height:1;margin-top:1px}
.kp-sec--light .ikc__code{color:var(--k-gold-dk);border-color:rgba(184,135,26,.4)}
.ikc__name{font-size:12px;line-height:1.42;color:var(--k-body);
  transition:color .3s}
.ikc__card:hover .ikc__name{color:var(--k-ink)}

@media(max-width:640px){
  .ikc{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
  .ikc__name{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .ikc__card,.ikc__ph img{transition:none!important;transform:none!important}
}