/* =========================================================================
   STYLE.CSS — Syska LED case study.
   Colors below are sampled directly from the original design file:
     pink accent   #EC008C  (divider bars, headline highlight, links)
     body gray     #58595B  (paragraph copy)
     label gray    #6D6E71  (eyebrows / "At A Glance" labels)
     panel gray    #DBDADF  (background of "The Work" campaign rows)
   ========================================================================= */

:root{
  --clr-pink:        #EC008C;
  --clr-body:        #58595B;
  --clr-label:       #6D6E71;
  --clr-panel:       #DBDADF;
  --clr-ink:         #231F20;
  --clr-white:       #ffffff;
  --clr-caution-bg:  #FFF4C2;

  --section-pad: clamp(2.5rem, 4vw, 4.5rem);
  --container-max: 1260px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  background: var(--clr-white);
  color: var(--clr-body);
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
}

.section{ padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

/* -------------------------------------------------------------------
   FULL-BLEED BREAKOUT
   In the source design, big photos run edge-to-edge of the page while
   the copy above/below sits in an inset reading column — that's the
   whole point of the "less widthwise" fix. This breaks an element out
   of any parent's max-width/padding to span the full viewport width,
   while the image itself just scales proportionally (width:100%,
   height:auto) so nothing is cropped or gappy at any screen size.
   ------------------------------------------------------------------- */
.bleed{
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.eyebrow{ color: var(--clr-label); }

.divider-v{
  width: 3px;
  background: var(--clr-pink);
  align-self: stretch;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------- */
.hero{ padding-top: clamp(2.5rem, 4vw, 4rem); }

.hero h1{
  color: var(--clr-pink);
  margin: 0.35rem 0 1.25rem;
  max-width: 900px;
}

.hero .eyebrow{ display: block; }

.hero-copy p{ margin-bottom: 1rem; }
.hero-copy .lede{
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--clr-body);
}

.hero-photo{
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: 0;
  overflow: hidden;
}
.hero-photo img{ width: 100%; height: auto; }

/* -------------------------------------------------------------------
   AT A GLANCE
   ------------------------------------------------------------------- */
.glance{ padding-top: var(--section-pad); padding-bottom: 0; }

.glance-item{
  border-left: 3px solid var(--clr-pink);
  padding-left: 1rem;
  height: 100%;
}
.glance-item .glance-label{
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
  display: block;
  margin-bottom: 0.4rem;
}
.glance-item .glance-value{ color: var(--clr-body); }
.glance-item ul{ list-style: none; padding: 0; margin: 0; }
.glance-item li{ margin-bottom: 0.15rem; }

.glance-photo{ margin-top: clamp(2rem, 3.5vw, 3rem); }
.glance-photo img{ width: 100%; height: auto; }

/* -------------------------------------------------------------------
   TWO-COLUMN LABEL/CONTENT SECTIONS
   (Challenge, Opportunity, Strategy, Media)
   ------------------------------------------------------------------- */
.split-section .split-row{
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: flex-start;
}

.split-section .split-label{
  flex: 0 0 clamp(220px, 26%, 320px);
}
.split-section .split-label h2{ color: var(--clr-ink); margin-bottom: 0.75rem; }
.split-section .split-label .lead-text{ color: var(--clr-body); }

.split-section .split-content{
  flex: 1 1 auto;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.split-content .divider-v{ margin-top: 0.15rem; }

.split-content .content-body{ flex: 1 1 auto; }
.content-body p{ margin-bottom: 1rem; }
.content-body p:last-child{ margin-bottom: 0; }

.check-list{ list-style: none; padding: 0; margin: 0; }
.check-list li{
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.6rem;
}
.check-list li::before{
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--clr-pink);
  font-weight: var(--fw-semibold);
}

.from-to-cols{
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.from-to-cols .col{ flex: 1 1 0; }
.from-to-cols h4{
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
  margin-bottom: 0.6rem;
}

.section-photo{ margin-top: clamp(2rem, 3.5vw, 3rem); }
.section-photo img{ width: 100%; height: auto; }

.pillar{ margin-top: 1.75rem; }
.pillar:first-of-type{ margin-top: 1.5rem; }
.pillar h4{
  font-weight: var(--fw-semibold);
  color: var(--clr-pink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------
   THE WORK — alternating campaign rows
   ------------------------------------------------------------------- */
.work-row{
  background: var(--clr-panel);
  margin-bottom: 6px;
}
.work-row .row{ --bs-gutter-x: 0; }

.work-row .work-media{ overflow: hidden; }
.work-row .work-media img{
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.work-row .work-text{
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.work-row .work-text h3{
  color: var(--clr-ink);
  margin-bottom: 0.85rem;
}
.work-row .work-text p{ margin-bottom: 0.85rem; }
.work-row .work-text p:last-child{ margin-bottom: 0; }

/* Caution graphic sits on a soft yellow ground, like the source file */
.work-row.caution-row .work-media{
  background: var(--clr-caution-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-row.caution-row .work-media img{
  object-fit: contain;
  min-height: 0;
  max-height: 320px;
  width: auto;
  max-width: 80%;
}

/* -------------------------------------------------------------------
   PHOTO GRID ROW — full-bleed multi-column image strips with no text
   (e.g. the "Irrfan Khan Era" 2-up and "Move Beyond Product Features"
   3-up rows). Use with .bleed + a Bootstrap .row.g-0 of col-* <img>s.
   ------------------------------------------------------------------- */
.photo-grid-row .row{ --bs-gutter-x: 0; }
.photo-grid-row img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------
   PHASE ITEMS + DOTS (the-work section "Phase 1/2/3" columns)
   ------------------------------------------------------------------- */
.phase-item{
  border-left: 3px solid var(--clr-pink);
  padding-left: 1rem;
  height: 100%;
}
.phase-item .phase-label{ color: var(--clr-body); display: block; }
.phase-item .phase-name{
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
  display: block;
  margin-top: 0.35rem;
}

.phase-dots{
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.75rem 0;
}
.phase-dots span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clr-panel);
}
.phase-dots span.active{ background: var(--clr-pink); }

/* -------------------------------------------------------------------
   INSET (non-bleed) PHOTO — sits within the reading column instead of
   breaking out full-width, matching the source file's centered ad shot.
   ------------------------------------------------------------------- */
.inset-photo{
  margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  max-width: 900px;
}
.inset-photo img{ width: 100%; height: auto; }

/* -------------------------------------------------------------------
   CLOSING PRODUCT STRIP
   ------------------------------------------------------------------- */
.product-grid{ margin-top: clamp(2rem, 3.5vw, 3rem); }
.product-grid img{ width: 100%; height: auto; }

/* -------------------------------------------------------------------
   THE IMPACT — stats + product shot
   ------------------------------------------------------------------- */
.stat-line{ margin-bottom: 0.35rem; }
.stat-line .stat-text{ color: var(--clr-pink); }
.stat-line .stat-platform{
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
}

.impact-photo{ margin-top: clamp(2rem, 3.5vw, 3rem); }
.impact-photo img{ width: 100%; height: auto; }

/* -------------------------------------------------------------------
   CLOSING STATEMENT
   ------------------------------------------------------------------- */
.closing-section{
  text-align: center;
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.closing-section .eyebrow{ color: var(--clr-pink); }
.closing-section p{
  max-width: 760px;
  margin: 0 auto 1.5rem;
  color: var(--clr-body);
}
.closing-section p:last-child{ margin-bottom: 0; }
.closing-section .closing-line-pink{ color: var(--clr-pink); font-weight: var(--fw-semibold); }
.closing-section .closing-line-gray{ color: var(--clr-label); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------
   SCROLL-REVEAL HELPER (paired with js/script.js + animate.css)
   Content defaults to visible; JS only hides-then-animates once it has
   confirmed it's actually running (see js/script.js), so the page
   still reads fine if jQuery/CDN scripts fail to load.
   ------------------------------------------------------------------- */
.reveal{ opacity: 1; }
.js-ready .reveal{ opacity: 0; }
.js-ready .reveal.animate__animated{ opacity: 1; }

/* -------------------------------------------------------------------
   MOBILE GUTTER SAFETY NET — see README for why this exists.
   ------------------------------------------------------------------- */
@media (max-width: 575.98px){
  .row{ --bs-gutter-x: 1.5rem; }
}

/* -------------------------------------------------------------------
   BACK TO TOP
   ------------------------------------------------------------------- */
.back-to-top{
  display: none;
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--clr-pink);
  color: var(--clr-white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(0,0,0,0.35);
  z-index: 999;
  border: none;
  text-decoration: none;
}

/* -------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 767.98px){
  .split-section .split-row{ flex-direction: column; }
  .split-section .split-label{ flex: 1 1 auto; width: 100%; }

  .work-row .work-media img{ min-height: 220px; }
  .work-row .work-text{ padding: 1.75rem 1.25rem; }

  .from-to-cols{ flex-direction: column; gap: 1.5rem; }
}