/* ==========================================================================
   House of Winners — tutorial page

   A gold-title hero band over a numbered timeline: one step per active
   cnf_tutorial row, each a card with a "HOW TO <word>" label and the video
   embedded inline.

   The video is the <iframe> the admin pasted into tutorial_content (a
   youtube.com/embed/… player). The old page instead used a poster image + a
   magnific-popup lightbox off tutorial_link; that field is empty on some rows,
   so the inline embed is both simpler and more reliable. See
   page_tutorial_view.php for how the iframe is pulled out of the content.

   Reminder: this theme sets html{font-size:62.5%} (css/assets/css/style.css),
   so 1rem = 10px here. rem is used for type (honours the browser font size),
   px for structural sizes — same split as css/promotion.css.
   ========================================================================== */

.hw-tut{
  background:var(--hw-page-bg,#000);
  padding:0 0 90px;
}

/* --------------------------------------------------------------------------
   Hero
   Full-bleed band, fixed 250px like the frame. The gold headline uses the
   frame's own gradient (a touch different from --hw-gold-gradient: the stops
   are shifted), kept literal so the title matches the export exactly.

   Art is optional and drop-in: the band lives in images/heroes/ (shared with
   the Rebate hero — hero-band.png desktop, hero-band-mobile.png phone) and
   the view adds --art, which swaps the CSS streaks for the image. No art → the
   streaks stand in so the band is never a flat brown rectangle.
   -------------------------------------------------------------------------- */
.hw-tut__hero{
  position:relative;
  height:250px;
  background:var(--hw-hero-bg,#352A23);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0 0 60px;
}
.hw-tut__hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 60%,rgba(243,201,97,.10) 62%,transparent 64%),
    linear-gradient(115deg,transparent 66%,rgba(243,201,97,.16) 68%,transparent 71%),
    linear-gradient(115deg,transparent 73%,rgba(243,201,97,.10) 75%,transparent 78%),
    radial-gradient(120% 90% at 90% 50%,rgba(196,150,22,.22),transparent 60%),
    radial-gradient(120% 90% at 10% 50%,rgba(196,150,22,.14),transparent 60%);
  pointer-events:none;
}
/* Real banner supplied → cover the band with it, drop the streaks.
   The view passes the art in as --hw-hero-art (and --hw-hero-art-sm for the
   phone variant) rather than as an inline background-image, so the media query
   at the bottom of this file can swap them — an inline style would win over
   any breakpoint rule. */
.hw-tut__hero--art{
  background-image:var(--hw-hero-art);
  background-size:cover;
  background-position:center;
}
.hw-tut__hero--art::before{display:none;}

.hw-tut__hero-title{
  position:relative;
  margin:0;
  font-family:var(--hw-font);
  font-size:6rem;              /* 60px */
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.05em;
  text-transform:capitalize;
  text-align:center;
  background:linear-gradient(180deg,#CD932C 16.58%,#F3C961 49.59%,#EFCF35 66.1%,#C49616 82.61%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.hw-tut__inner{
  width:100%;
  max-width:var(--hw-container,1250px);
  margin-inline:auto;
  padding:0 20px;
}

/* --------------------------------------------------------------------------
   Timeline
   [rail | card] rows. A single dashed line is drawn on the list (not per row)
   so it stays continuous through the gaps between cards; the numbered discs
   sit on top of it. Rail is 108px wide, so the line and disc centre at 54px.
   -------------------------------------------------------------------------- */
.hw-tut__list{position:relative;}

.hw-tut__step{
  position:relative;
  display:grid;
  grid-template-columns:108px 1fr;
  gap:0 36px;
  margin-bottom:34px;
}
.hw-tut__step:last-child{margin-bottom:0;}

.hw-tut__rail{
  position:relative;
  display:flex;
  align-items:center;        /* centre the disc on the card it labels */
  justify-content:center;
}
/* Dashed connector: from THIS disc's centre down to the NEXT disc's centre,
   drawn per step rather than as one line on the list — that's what keeps it
   from overhanging disc 1 (top) and the last disc (bottom).
   Length = one row height + the 34px inter-step margin, which lands exactly on
   the next centred disc because the cards are equal height. The last step
   draws nothing. If --hw gap below (.hw-tut__step margin-bottom) changes, keep
   the 34px here in sync. */
.hw-tut__rail::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-1px);
  height:calc(100% + 34px);
  border-left:2px dashed var(--hw-gold-line,#9F853F);
}
.hw-tut__step:last-child .hw-tut__rail::before{display:none;}
.hw-tut__num{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--hw-gold-gradient);
  color:#231a08;
  font-family:var(--hw-font);
  font-size:2.6rem;          /* 26px */
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  /* the ring punches the disc out of the dashed line cleanly */
  box-shadow:0 0 0 6px var(--hw-page-bg,#000),0 6px 18px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   Card
   Two columns: the label on the left, the video on the right. The video side
   is given a little more room (1.15fr) so a 16:9 player doesn't feel cramped
   next to the short label.
   -------------------------------------------------------------------------- */
.hw-tut__card{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:40px;
  background:#151515;
  border:1px solid rgba(196,150,22,.42);
  border-radius:12px;
  padding:34px 44px;
}

.hw-tut__label{min-width:0;}
.hw-tut__kicker{
  margin:0;
  font-family:var(--hw-font);
  font-size:2.6rem;          /* 26px */
  font-weight:700;
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;  /* frame shows "HOW TO"; trans() may return title case */
  color:var(--hw-on-surface,#fff);
}
.hw-tut__word{
  display:block;
  margin-top:2px;
  font-family:var(--hw-font);
  font-size:4.4rem;          /* 44px */
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  word-break:break-word;
  background:var(--hw-gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* When a row's name has no "HOW TO" to split on, only .hw-tut__word renders
   (the full name). Give it a touch more breathing room in that case. */
.hw-tut__label--plain .hw-tut__word{font-size:3.6rem;}

.hw-tut__bar{
  width:64px;
  height:4px;
  margin-top:18px;
  border-radius:2px;
  background:var(--hw-gold-gradient);
}

/* Video. aspect-ratio holds the 16:9 box; the embedded iframe (authored at
   300x300 in CKEditor) is stretched to fill it regardless of its own attrs. */
.hw-tut__video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--hw-gold,#FACF5A);   /* frame: gold-bordered player */
  background:#000;
}
@supports not (aspect-ratio:1/1){
  .hw-tut__video{height:0;padding-top:56.25%;}
}
.hw-tut__video iframe,
.hw-tut__video video,
.hw-tut__video embed,
.hw-tut__video object{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  border:0;
}

.hw-tut__empty{
  margin:40px 0 0;
  font-family:var(--hw-font);
  font-size:var(--hw-fs,1.4rem);
  color:var(--hw-muted,#B3B3B3);
  text-align:center;
}

/* --------------------------------------------------------------------------
   Responsive
   Figma supplies a desktop frame only. Two chosen breakpoints:
   - <=900px: card stacks (label above video); the rail stays but the line
     still threads the discs.
   - <=560px: drop the rail/line entirely and let the disc sit inline above
     each card, so the video keeps full width on a phone.
   -------------------------------------------------------------------------- */
/* Hero art on a phone. The shared desktop band is 1440x250 (5.76:1); in a
   phone-width box `cover` crops to the middle of the artwork, which on that
   banner is empty black — the gold streaks sit at the far left/right edges
   only, so the hero reads as having no background. Use the 393x150 variant
   when present; without one, drop the image and let the ::before streaks paint
   the band, since those are gradients and scale to any width.
   767px is used (not this file's 560px layout step) so the swap lines up with
   the header's own mobile switch, same as css/rebate.css. */
@media (max-width:767px){
  .hw-tut__hero--art-sm{background-image:var(--hw-hero-art-sm);}
  .hw-tut__hero--art:not(.hw-tut__hero--art-sm){background-image:none;}
  .hw-tut__hero--art:not(.hw-tut__hero--art-sm)::before{display:block;}
}

@media (max-width:900px){
  .hw-tut{padding-bottom:60px;}
  .hw-tut__hero{height:180px;margin-bottom:40px;}
  .hw-tut__hero-title{font-size:4rem;}
  .hw-tut__card{grid-template-columns:1fr;gap:22px;padding:26px 28px;}
  .hw-tut__word{font-size:3.6rem;}
}
@media (max-width:560px){
  .hw-tut{padding-bottom:40px;}
  .hw-tut__hero{height:150px;margin-bottom:22px;}
  .hw-tut__hero-title{font-size:3.8rem;}        /* 38px */

  .hw-tut__inner{padding:0 9px;}

  /* The mobile frame has NO numbered timeline — just stacked cards. Drop the
     rail entirely (display:none pulls it out of the grid, so the card takes
     the full single column). */
  .hw-tut__rail{display:none;}
  .hw-tut__step{grid-template-columns:1fr;margin-bottom:14px;}

  .hw-tut__card{padding:12px;gap:16px;border-radius:6px;background:var(--hw-footer-bg,#171717);}
  .hw-tut__kicker{font-size:3rem;}              /* 30px */
  .hw-tut__word{font-size:4.8rem;}              /* 48px */
  .hw-tut__label--plain .hw-tut__word{font-size:3.6rem;}
  .hw-tut__bar{width:50px;margin-top:20px;}
  .hw-tut__video{border-radius:15px;}
}