/* Fifty Homepage Builder — frontend
   Mobile-app first; carousels on phones, grids on tablet/laptop/desktop.
   All colors/spacing come from CSS vars set inline by the shortcode. */

.fhb{
  --fhb-page-bg:#fafafa;--fhb-maxw:1200px;--fhb-pad:18px;--fhb-gap:26px;
  --fhb-card-bg:#fff;--fhb-border:#ececf2;--fhb-radius:20px;--fhb-shadow:0 10px 30px rgba(25,25,77,.10);
  --fhb-heading:#19194d;--fhb-text:#6a6b86;--fhb-accent:#262c99;--fhb-primary:#19194d;
  --fhb-primary-hover:#262c99;--fhb-badge:#dae83d;--fhb-badge-text:#19194d;--fhb-star:#e0a500;
  background:var(--fhb-page-bg);
  color:var(--fhb-heading);
  max-width:var(--fhb-maxw);
  margin:0 auto;
  box-sizing:border-box;
  font-family:inherit;
}
.fhb *{box-sizing:border-box;}
.fhb-app-frame{max-width:460px;border-radius:34px;overflow:hidden;box-shadow:0 30px 80px rgba(25,25,77,.16);}

/* gradients reused by course/session media */
.fhb-g1{background:linear-gradient(140deg,#19194d,#262c99);}
.fhb-g2{background:linear-gradient(140deg,#262c99,#3a44c4);}
.fhb-g3{background:linear-gradient(140deg,#20204f,#33409f);}
.fhb-g4{background:linear-gradient(140deg,#19194d,#2b2b70);}

/* ---------- Section header ---------- */
.fhb-section{padding-top:var(--fhb-gap);}
.fhb-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--fhb-pad) 13px;}
.fhb-sechead h2{font-size:20px;margin:0;color:var(--fhb-heading);font-weight:700;letter-spacing:-.2px;}
.fhb-sechead p{margin:3px 0 0;font-size:12.5px;color:var(--fhb-text);}
.fhb-see{font-size:12.5px;font-weight:600;color:var(--fhb-accent);text-decoration:none;white-space:nowrap;}
.fhb-see:hover{text-decoration:underline;}

/* ---------- Buttons ---------- */
.fhb-btn{display:inline-block;font-weight:600;font-size:13.5px;border-radius:12px;padding:11px 20px;text-decoration:none;cursor:pointer;transition:background .2s ease,transform .15s ease;border:0;line-height:1.2;}
.fhb-btn-primary{background:var(--fhb-primary);color:#fff;}
.fhb-btn-primary:hover{background:var(--fhb-primary-hover);color:#fff;}
.fhb-btn-lime{background:var(--fhb-badge);color:var(--fhb-badge-text);font-weight:700;}
.fhb-btn-lime:hover{transform:translateY(-1px);}
.fhb-btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.45);}

/* ---------- Rows: carousel on mobile, grid on desktop ---------- */
.fhb-row{
  display:flex;gap:14px;overflow-x:auto;padding:2px var(--fhb-pad) 8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.fhb-row::-webkit-scrollbar{display:none;}
.fhb-row>*{scroll-snap-align:start;}

/* ---------- HERO (two columns: text left, image right) ---------- */
.fhb-hero{
  --fhb-hero-h:300px;position:relative;margin:var(--fhb-gap) var(--fhb-pad) 0;
  border-radius:24px;overflow:hidden;color:var(--fhb-hero-text,#fff);box-shadow:var(--fhb-shadow);
  background:linear-gradient(135deg,var(--fhb-primary),var(--fhb-accent));
  display:flex;flex-direction:column;
}
.fhb-hero-left{padding:26px 24px;display:flex;flex-direction:column;justify-content:center;flex:1;}
.fhb-hero-right{position:relative;min-height:200px;background:transparent;}
.fhb-hero-right img{width:100%;height:100%;object-fit:cover;display:block;}
/* Mobile: image on TOP, shown in full, on the hero's own background */
@media (max-width:767px){
  .fhb-hero-right{order:-1;min-height:auto;}
  .fhb-hero-right img{height:auto;object-fit:contain;}
}
.fhb-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--fhb-badge);}
.fhb-hero h1{font-size:28px;line-height:1.12;margin:10px 0 8px;letter-spacing:-.4px;font-weight:700;color:inherit;}
.fhb-hero p{font-size:13.5px;margin:0 0 18px;opacity:.9;max-width:36ch;}
.fhb-hero-btns{display:flex;gap:10px;flex-wrap:wrap;}
.fhb-hero-center .fhb-hero-left{text-align:center;align-items:center;}
.fhb-hero-center .fhb-hero-btns{justify-content:center;}
.fhb-hero-center p{margin-left:auto;margin-right:auto;}

/* ---------- COURSES (vertical cards) ---------- */
.fhb-row-courses>*{flex:0 0 66%;max-width:250px;}
.fhb-ccard{background:var(--fhb-card-bg);border:1px solid var(--fhb-border);border-radius:var(--fhb-radius);box-shadow:var(--fhb-shadow);overflow:hidden;text-decoration:none;color:inherit;display:block;}
.fhb-cthumb{height:122px;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;background-size:cover;background-position:center;}
.fhb-cthumb-label{font-weight:700;font-size:16px;opacity:.92;}
.fhb-badge{position:absolute;inset-inline-start:10px;top:10px;font-size:10px;font-weight:700;background:var(--fhb-badge);color:var(--fhb-badge-text);border-radius:999px;padding:3px 9px;}
.fhb-level{position:absolute;inset-inline-start:10px;bottom:10px;font-size:10px;font-weight:700;background:rgba(255,255,255,.92);color:var(--fhb-heading);border-radius:999px;padding:3px 8px;}
.fhb-cinfo{padding:13px 14px 15px;}
.fhb-cinfo h3{margin:0 0 3px;font-size:14.5px;line-height:1.25;color:var(--fhb-heading);}
.fhb-cby{font-size:11.5px;color:var(--fhb-text);margin-bottom:10px;}
.fhb-cfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fhb-rate{font-size:12px;color:var(--fhb-text);}
.fhb-rate b{color:var(--fhb-heading);}
.fhb-rcount{color:var(--fhb-text);}
.fhb-star{color:var(--fhb-star);}
.fhb-price{font-weight:700;color:var(--fhb-accent);font-size:14.5px;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;flex-wrap:wrap;text-align:end;min-width:0;}
.fhb-price-now{color:var(--fhb-accent);font-weight:700;}
.fhb-price-free{color:#5c7a00;}
.fhb-price-was{font-size:12px;font-weight:600;color:#a6a6b4;text-decoration:line-through;text-decoration-thickness:1.5px;}
/* Flatten the markup the payment plugin wraps each number in. Scoped to the
   INSIDE of each amount so it can never out-specify the amount's own style. */
.fhb-price-now *,.fhb-price-was *{font-size:inherit;font-weight:inherit;color:inherit;text-decoration:inherit;background:none;}
.fhb-price .screen-reader-text{display:none !important;}
.fhb-sale{position:absolute;inset-inline-end:10px;top:10px;font-size:10px;font-weight:800;letter-spacing:.02em;background:var(--fhb-badge);color:var(--fhb-badge-text);border-radius:999px;padding:3px 9px;box-shadow:0 2px 6px rgba(0,0,0,.14);}

/* ---------- SESSIONS (full-width horizontal card, slider on mobile) ---------- */
.fhb-carousel{position:relative;}
.fhb-row-sessions>*{flex:0 0 100%;}
.fhb-scard{display:flex;background:var(--fhb-card-bg);border:1px solid var(--fhb-border);border-radius:var(--fhb-radius);box-shadow:var(--fhb-shadow);overflow:hidden;min-height:148px;text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease;}
a.fhb-scard:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(25,25,77,.14);}
.fhb-smedia{flex:0 0 120px;position:relative;display:flex;align-items:center;justify-content:center;background-color:#eef0fb;background-size:cover;background-position:center;}
.fhb-sinitial{font-weight:700;font-size:26px;color:var(--fhb-accent);opacity:.85;}
.fhb-slive{position:absolute;inset-inline-start:10px;top:10px;font-size:10px;font-weight:700;color:var(--fhb-badge-text);background:var(--fhb-badge);border-radius:999px;padding:4px 9px;}
.fhb-sinfo{flex:1;min-width:0;padding:15px 16px;display:flex;flex-direction:column;justify-content:center;}
.fhb-sinfo h3{margin:0 0 8px;font-size:15px;line-height:1.25;color:var(--fhb-heading);}
.fhb-smeta{font-size:12px;color:var(--fhb-text);margin-bottom:13px;}
.fhb-sfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fhb-sprice{font-size:16px;color:var(--fhb-heading);}
.fhb-book{padding:10px 18px;font-size:13px;}

/* ---------- CATEGORIES (image-topped cards, ~2 per view on mobile) ---------- */
.fhb-row-cats{gap:14px;padding-bottom:8px;}
.fhb-row-cats>*{flex:0 0 clamp(150px,46%,190px);}
.fhb-catcard{display:flex;flex-direction:column;overflow:hidden;background:var(--fhb-card-bg);border:1px solid var(--fhb-border);border-radius:var(--fhb-radius);box-shadow:var(--fhb-shadow);text-decoration:none;color:var(--fhb-heading);transition:transform .2s ease,box-shadow .2s ease;}
.fhb-catcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(25,25,77,.14);}
.fhb-catimg{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#eef0fb;}
.fhb-catimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.fhb-catcard:hover .fhb-catimg img{transform:scale(1.045);}
.fhb-catph{display:grid;place-items:center;width:100%;height:100%;color:var(--fhb-accent);background:linear-gradient(135deg,#f4f6ff,#e9edfb);}
.fhb-catbody{display:flex;flex:1;flex-direction:column;gap:8px;padding:14px 16px;}
.fhb-cattitle{font-size:15px;font-weight:700;line-height:1.3;color:var(--fhb-heading);}
.fhb-catcount{align-self:flex-start;font-size:11px;font-weight:700;color:var(--fhb-accent);background:#eef0fb;border-radius:999px;padding:4px 10px;}
@media (max-width:600px){
  .fhb-catbody{padding:11px 12px;gap:6px;}
  .fhb-cattitle{font-size:13.5px;}
}

/* Floating side arrows for the categories carousel (mobile + tablet, app style) */
.fhb-cats .fhb-carousel{position:relative;}
.fhb-cats .fhb-row-cats{padding-left:10px;padding-right:10px;scroll-padding-inline:10px;}
/* translateY(-50%) pulls the button back by half its own height, so its
   CENTRE lands on --fhb-arrow-y (the centre line of the card image). The
   old value, translateY(21%), pushed it DOWN by a fifth of its height
   instead, leaving the arrow sitting 27px below the image it was meant to
   be centred on. */
.fhb-arrow.fhb-side{position:absolute;top:var(--fhb-arrow-y,70px);transform:translateY(-50%);z-index:6;width:38px;height:38px;font-size:19px;background:#fff;border:0;color:var(--fhb-accent);box-shadow:0 6px 18px rgba(15,23,42,.28);}
.fhb-arrow.fhb-side:hover{background:var(--fhb-accent);color:#fff;}
.fhb-arrow.fhb-side.fhb-prev{inset-inline-start:6px;}
.fhb-arrow.fhb-side.fhb-next{inset-inline-end:6px;}
.fhb-cats .fhb-carousel-ctrl{margin-top:14px;}
/* Keep categories a carousel through tablet, with the side arrows + dots */
@media (min-width:600px) and (max-width:1023.98px){
  .fhb-row.fhb-row-cats{display:flex;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;gap:16px;}
  .fhb-row.fhb-row-cats>*{flex:0 0 clamp(190px,30%,240px);max-width:none;}
  .fhb-cats .fhb-carousel-ctrl{display:flex;}
}
/* Laptop and up: grid, no arrows/dots */
@media (min-width:1024px){
  .fhb-cats .fhb-row-cats{padding-left:var(--fhb-pad);padding-right:var(--fhb-pad);}
  .fhb-cats .fhb-side{display:none;}
}

/* ---------- Carousel controls (matched to Fifty Tutor Course Categories) ---------- */
.fhb-carousel-ctrl{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:18px;padding:0;}
.fhb-arrow{width:38px;height:38px;padding:0;display:grid;place-items:center;color:var(--fhb-heading);background:var(--fhb-card-bg);border:1px solid var(--fhb-border);border-radius:50%;font-size:25px;line-height:1;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;}
.fhb-arrow:hover{background:var(--fhb-accent);border-color:var(--fhb-accent);color:#fff;}
.fhb-dots{display:flex;align-items:center;gap:7px;justify-content:center;}
.fhb-dot{width:8px;height:8px;padding:0;background:var(--fhb-border);border:0;border-radius:50%;cursor:pointer;transition:.2s ease;}
.fhb-dot.on{width:21px;background:var(--fhb-accent);border-radius:999px;}

/* ---------- Notices (admin only) ---------- */
.fhb-notice{margin:16px var(--fhb-pad);padding:14px 16px;border-radius:12px;background:#fff5f5;border:1px solid #ffd7d7;color:#a12626;font-size:13px;}

/* =====================================================================
   Tablet and up — carousels become grids
   ===================================================================== */
/* Tablet columns (phones below this stay a carousel) */
@media (min-width:600px){
  .fhb-row{display:grid;overflow:visible;scroll-snap-type:none;padding-left:var(--fhb-pad);padding-right:var(--fhb-pad);gap:20px;}
  .fhb-row>*{flex:none;max-width:none;}
  .fhb-row-courses{grid-template-columns:repeat(var(--ct,2),1fr);}
  .fhb-row-sessions{grid-template-columns:repeat(var(--ct,1),1fr);}
  .fhb-row-cats{grid-template-columns:repeat(var(--ct,4),1fr);}
  /* controls only make sense for the mobile carousel */
  .fhb-carousel-ctrl{display:none;}
}
/* Hero becomes two columns a little later so it isn't cramped */
@media (min-width:768px){
  .fhb-hero{flex-direction:row;min-height:var(--fhb-hero-h);}
  .fhb-hero-left{flex:1;padding:38px 40px;}
  .fhb-hero-has-image .fhb-hero-right{flex:0 0 44%;min-height:auto;}
}
/* Laptop columns */
@media (min-width:1024px){
  .fhb-row-courses{grid-template-columns:repeat(var(--cl,3),1fr);}
  .fhb-row-sessions{grid-template-columns:repeat(var(--cl,2),1fr);}
  .fhb-row-cats{grid-template-columns:repeat(var(--cl,5),1fr);}
  .fhb-hero h1{font-size:34px;}
}
/* Desktop columns */
@media (min-width:1280px){
  .fhb-row-courses{grid-template-columns:repeat(var(--cd,4),1fr);}
  .fhb-row-sessions{grid-template-columns:repeat(var(--cd,2),1fr);}
  .fhb-row-cats{grid-template-columns:repeat(var(--cd,6),1fr);}
}

/* App-frame mode keeps everything as a phone column even on desktop */
.fhb-app-frame .fhb-row{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;}
.fhb-app-frame .fhb-row-courses>*{flex:0 0 66%;}
.fhb-app-frame .fhb-row-sessions>*{flex:0 0 100%;}
.fhb-app-frame .fhb-row-cats>*{flex:0 0 112px;}
.fhb-app-frame .fhb-carousel-ctrl{display:flex;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fhb-row{scroll-behavior:auto;}
  .fhb-btn,.fhb-catcard{transition:none;}
}

/* ---------- HERO GUEST BUTTONS: mobile + tablet ---------- */
/* Added by the "Hide these buttons on mobile and tablet" setting. The class is
   only printed for logged-out visitors, so logged-in users are never affected.
   1023.98px is this file's existing desktop cut-off (see the min-width:1024px
   blocks above), so the buttons reappear at exactly the width desktop begins. */
@media (max-width:1023.98px){
  .fhb-hero-btns.fhb-hero-btns-hide-mt{display:none;}
}