/* ============================================================
   King Slayer Sportfishing: Lake Ontario salmon charters page
   Requires tokens.css then base.css.
   Component rules live in base.css. This file holds the page
   spine: a full-bleed photo hero with a bottom scrim (distinct
   from the home page split hero), the season strip and the
   compact Sea-Ray advantage band.
   ============================================================ */

/* ============ Hero: full-bleed photo, bottom scrim ============ */
.lo-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(80vh,760px);
  overflow:hidden;
  background:var(--deep-900);
  border-bottom:2px solid var(--blue); /* the waterline seam */
}
/* the hero photo fills the band, so it overrides the HTML width/height
   attributes on purpose: the scrim below it carries the copy contrast */
.lo-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 38%;
  transform:translateZ(0); /* forces layer promotion; Chrome can skip painting the abs-positioned photo under the ::after scrim without it */
}
.lo-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(13,23,48,.94) 0%,
    rgba(13,23,48,.86) 22%,
    rgba(13,23,48,.42) 55%,
    rgba(13,23,48,.10) 78%,
    rgba(13,23,48,.38) 100%);
  pointer-events:none;
}
.lo-hero-inner{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(6rem,16vw,10rem) var(--gutter) clamp(2.5rem,5vw,3.75rem);
}
.lo-hero .eyebrow{margin-bottom:1.1rem}
.lo-hero h1{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(2.05rem,4.4vw,3.6rem);
  line-height:1.03;
  text-transform:uppercase;
  letter-spacing:.008em;
  color:var(--cream);
  max-width:20ch;
  margin-bottom:1.35rem;
}
.lo-hero-sub{
  max-width:44rem;
  color:var(--ice);
  font-size:clamp(1rem,1.35vw,1.125rem);
}
.lo-hero-cta{
  display:flex;flex-wrap:wrap;gap:.9rem;
  margin-top:2rem;
}

/* ============ Season band: April to October strip ============ */
.season-band{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--blue-bright);
  padding:1.5rem 1.7rem 1.7rem;
}
.season-band .eyebrow{margin-bottom:.85rem}
.season-band h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.85rem;
}

/* the band leads straight from the H2 into the strip now that the
   intro paragraph is gone, so the top margin carries the whole gap */
.month-strip{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:3px;
  margin:1.35rem 0 1.1rem;
}
.month-strip li{
  text-align:center;
  padding:.75rem .2rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
  background:var(--deep-800);
  border:1px solid var(--line);
}
.month-strip li.is-part{
  color:var(--ice);
  background:var(--deep-700);
  border-color:var(--blue);
}
.month-strip li.is-on{
  color:var(--deep-900);
  background:var(--blue-bright);
  border-color:var(--blue-bright);
  font-weight:760;
}

.season-legend{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.season-legend li{
  display:flex;align-items:center;gap:.6rem;
  color:var(--dim);
  font-size:.86rem;
}
.season-legend .sw{
  width:.95rem;height:.95rem;flex:none;
  display:inline-block;
}
.season-legend .sw-on{background:var(--blue-bright)}
.season-legend .sw-part{background:var(--deep-700);border:1px solid var(--blue)}

.season-note{margin-top:1.25rem}
.season-note p{color:var(--dim);font-size:.95rem;max-width:52rem}
.season-note p + p{margin-top:.8rem}
.season-note b{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-bright);
}
.season-note a{color:var(--ice);text-decoration:none;border-bottom:1px solid var(--blue)}
.season-note a:hover{color:var(--blue-bright);border-color:var(--blue-bright)}

/* ============ Sea-Ray advantage band ============ */
.adv-band{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.adv-copy p{color:var(--dim)}
.adv-copy p + p{margin-top:1rem}
.adv-copy .btn{margin-top:1.9rem}
.adv-list-label{
  margin-top:1.7rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-bright);
}
.equip-list{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:1.6rem;
  margin-top:.7rem;
  border-top:1px solid var(--line);
}
.equip-list li{
  position:relative;
  padding:.62rem 0 .62rem 1.4rem;
  border-bottom:1px solid var(--line);
  color:var(--dim);
  font-size:.93rem;
  line-height:1.45;
}
.equip-list li::before{
  content:"";
  position:absolute;left:0;top:1.05em;
  width:.65rem;height:2px;
  background:var(--blue-bright);
}
/* height:auto beats the HTML height attribute so aspect-ratio wins */
.adv-photo img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--line);
}

/* ============ Package note under the Sea-Ray row ============ */
.pkg-note{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line);
  padding-top:1.2rem;
}
.pkg-note p{color:var(--dim);font-size:.95rem;max-width:54rem}

/* ============ Motion ============ */
@media (prefers-reduced-motion:no-preference){
  .lo-hero-inner > *{
    opacity:0;transform:translateY(12px);
    animation:surface .65s ease forwards;
  }
  .lo-hero-inner > *:nth-child(2){animation-delay:.1s}
  .lo-hero-inner > *:nth-child(3){animation-delay:.2s}
  .lo-hero-inner > *:nth-child(4){animation-delay:.3s}
  @keyframes surface{to{opacity:1;transform:none}}
}

/* ============ Responsive ============ */
@media (max-width:960px){
  .lo-hero{min-height:min(70vh,620px)}
}
@media (max-width:880px){
  .adv-band{grid-template-columns:1fr}
  .adv-photo img{aspect-ratio:16/10}
  .equip-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lo-hero{min-height:0}
  .lo-hero-inner{padding-top:clamp(9rem,42vw,13rem)}
  .lo-hero-cta .btn{flex:1 1 100%;text-align:center}
  /* matches base.css's shared .page-hero h1 mobile floor: the 320px fine-tune
     below takes over from here, but 641-360 needs its own shrink step too */
  .lo-hero h1{font-size:clamp(1.75rem,7.4vw,2.3rem);max-width:none}
  .season-band{padding:1.25rem 1.15rem 1.4rem}
  .month-strip{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:360px){
  /* six month cells across a 320 screen: the band gives back some padding and
     the cells drop a step in size, so "Aug" fits its cell instead of pushing
     the strip past the column. minmax(0,1fr) keeps the track from taking a
     min-content floor from the label */
  .season-band{padding:1.05rem 1rem 1.2rem}
  .month-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
  .month-strip li{padding:.6rem .1rem;font-size:.62rem;letter-spacing:.04em}
  /* CATHARINES measures 286px at the hero H1 floor, wider than the 280px column */
  .lo-hero h1{font-size:clamp(1.7rem,8.6vw,2.05rem)}
}