/* =========================================================
   Panado Educational Landing — Scoped Styles
   Every selector starts with .panado-edu-root
   ========================================================= */

/* ----- Gotham font faces ----- */
@font-face {
  font-family: "Gotham";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/Gotham-Light.woff2") format("woff2"),
       url("../fonts/Gotham-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Gotham-Book.woff2") format("woff2"),
       url("../fonts/Gotham-Book.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/Gotham-Medium.woff2") format("woff2"),
       url("../fonts/Gotham-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Gotham-Bold.woff2") format("woff2"),
       url("../fonts/Gotham-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/Gotham-Black.woff2") format("woff2"),
       url("../fonts/Gotham-Black.woff") format("woff");
  font-display: swap;
}

/* ----- Reset inside wrapper only ----- */
.panado-edu-root,
.panado-edu-root *,
.panado-edu-root *::before,
.panado-edu-root *::after {
  box-sizing: border-box;
}

.panado-edu-root {
  all: revert;
  position: relative;
  z-index: 0;
  font-family: var(--edu-font, inherit);
  color: var(--edu-dark);
  line-height: 1.5;
}

.panado-edu-root p,
.panado-edu-root h1,
.panado-edu-root h2,
.panado-edu-root h3,
.panado-edu-root ul,
.panado-edu-root ol,
.panado-edu-root li,
.panado-edu-root a,
.panado-edu-root button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
}

/* ----- CSS Custom Properties ----- */
.panado-edu-root {
  --edu-red: #EE3324;
  --edu-blue: #00B2DC;
  --edu-dark: #434242;
  --edu-white: #ffffff;
  --edu-gray: #F6F6F6;
  --edu-max: 1200px;
  --edu-font: "Gotham", sans-serif;
}

/* ----- Theme container override ----- */
.container > .panado-edu-root,
.container .panado-edu-root {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  max-width: none;
}

/* ----- Layout scaffolding ----- */
.panado-edu-section {
  width: 100%;
}

.panado-edu-inner {
  max-width: var(--edu-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Animations (gated by .panado-edu-ready-fired) ----- */
html.panado-edu-ready-fired .panado-edu-root [data-panado-animate] {
  opacity: 0;
  transform: translateY(24px);
}

html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(1) { transition-delay: 0ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(2) { transition-delay: 100ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(3) { transition-delay: 200ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(4) { transition-delay: 300ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(5) { transition-delay: 400ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(6) { transition-delay: 500ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(7) { transition-delay: 600ms; }
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-stagger] > [data-panado-animate].is-visible:nth-child(8) { transition-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  html.panado-edu-ready-fired .panado-edu-root [data-panado-animate] {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* Safety fallback: if JS fails or observer misses, show content after 1.5s */
html.panado-edu-ready-fired .panado-edu-root.is-ready [data-panado-animate]:not(.is-visible) {
  animation: panado-edu-fallback-show 0s 1.5s forwards;
}

@keyframes panado-edu-fallback-show {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Buttons ----- */
.panado-edu-root .panado-edu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transition: background 250ms ease, transform 200ms ease;
  text-transform: uppercase;
  font-size: 0.95rem;
  border: none;
  color: var(--edu-white);
}

.panado-edu-root .panado-edu-btn--red {
  background: var(--edu-red);
}

.panado-edu-root .panado-edu-btn--red:hover,
.panado-edu-root .panado-edu-btn--red:focus-visible {
  background: #c42a1d;
  transform: translateY(-2px);
}

/* ----- Section 1 — Hero ----- */
.panado-edu-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

.panado-edu-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.panado-edu-hero__corner {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 60px;
  height: auto;
}

.panado-edu-hero__corner--tl {
  top: 0;
  left: 0;
}

.panado-edu-hero__corner--br {
  bottom: 0;
  right: 0;
}

.panado-edu-hero__bg-right {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 55%;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
}

.panado-edu-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px;
  gap: 40px;
}

.panado-edu-hero__left {
  flex: 1 1 45%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panado-edu-hero__title {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  text-transform: uppercase;
}

.panado-edu-hero__title-blue {
  color: var(--edu-blue);
}

.panado-edu-hero__title-red {
  color: var(--edu-red);
}

.panado-edu-hero__header-img {
  max-width: 500px;
  height: auto;
  display: block;
  width: 100%;
  padding-left: 4.7vw;
}

.panado-edu-hero__tagline-1 {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--edu-dark);
  text-transform: uppercase;
  line-height: 1.3;
}

.panado-edu-hero__tagline-1 em {
  color: var(--edu-red);
  font-style: italic;
  font-weight: 900;
}

.panado-edu-hero__tagline-2 {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--edu-dark);
  font-weight: 400;
}

.panado-edu-hero__packshot {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 8px;
}

.panado-edu-hero__right {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panado-edu-hero__roary {
  max-width: 100%;
  height: auto;
  display: block;
}

.panado-edu-hero__mobile-img {
  display: none;
  width: 100%;
  height: auto;
}

/* ----- Section 2 — How to Play ----- */
.panado-edu-howto {
  position: relative;
  overflow: hidden;
  padding: 60px 0 0;
}

.panado-edu-howto__corner {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  width: 6.5vw;
  height: auto;
}

.panado-edu-howto__corner--tl {
  top: 0;
  left: 0;
}

.panado-edu-howto__corner--br {
  bottom: 0;
  right: 0;
}

.panado-edu-howto__intro {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.panado-edu-howto__intro-red {
  color: var(--edu-red);
  font-weight: 900;
  font-size: clamp(1.275rem, 2.7vw, 2.025rem);
  text-transform: capitalize;
  line-height: 1.2;
  margin-bottom: 4px;
}

.panado-edu-howto__intro-dark {
  color: var(--edu-dark);
  font-size: clamp(1.05rem, 1.8vw, 1.275rem);
  font-weight: 400;
}

.panado-edu-howto__columns {
  display: grid;
  grid-template-columns: 45% 1fr;
  grid-template-rows: minmax(clamp(480px, 45vw, 720px), auto);
  align-items: stretch;
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  padding: 0;
  background: linear-gradient(180deg, #FEFEFE 0%, #F0F0F0 100%);
}

.panado-edu-howto__left {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  grid-row: 1;
  z-index: 5;
  position: relative;
  grid-column: 1;
}

.panado-edu-howto__headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 32px;
}

.panado-edu-howto__headline-blue {
  color: var(--edu-blue);
}

.panado-edu-howto__headline-red {
  color: var(--edu-red);
}

.panado-edu-howto__steps-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 1.5rem auto 0;
}

.panado-edu-howto__line {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--edu-red);
  border-radius: 2px;
  z-index: 0;
}

.panado-edu-howto__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

.panado-edu-howto__steps .panado-edu-step {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  background: #fff !important;
  border-radius: 5px;
  padding: 14px 18px !important;
  z-index: 2;
  margin: 0 auto;
  width: 100%;
}

.panado-edu-step__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}

.panado-edu-step__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.panado-edu-step__number {
  color: var(--edu-red);
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.panado-edu-step__text {
  color: var(--edu-dark);
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 400;
}

.panado-edu-step__text strong {
  font-weight: 500;
}

.panado-edu-howto__cta-wrap {
  margin-top: 28px;
  text-align: center;
}

.panado-edu-howto__right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  grid-column: 1/-1;
  grid-row: 1;
  position: relative;
  z-index: 0;
}

.panado-edu-howto__right-bg {
  position: absolute;
  inset: 0;
  background: url('../howtoplay/gridassets/bg.webp') no-repeat center/cover;
  overflow: hidden;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
  -webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
}

.panado-edu-howto__confetti {
  position: absolute;
  right: 0;
  left: auto;
  width: 50%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.panado-edu-howto__confetti--top {
  top: 0;
}

.panado-edu-howto__confetti--bottom {
  bottom: 0;
}

.panado-edu-howto__prize {
  position: absolute;
  top: 10%;
  right: 2.5%;
  left: auto;
  height: 90%;
  width: auto;
  max-width: 40%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 2;
  pointer-events: none;
}

.panado-edu-howto__mobile-img {
  display: none;
  width: 100%;
  height: auto;
}

/* ----- Section 3 — Share ----- */
.panado-edu-share {
  background: var(--edu-gray);
  padding: 60px 0 80px;
}

.panado-edu-share__top {
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.panado-edu-share__intro {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--edu-dark);
  font-weight: 400;
}

.panado-edu-share__btn-wrap {
  display: flex;
  justify-content: center;
}

.panado-edu-share__btn-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.panado-edu-share__terms {
  color: var(--edu-dark);
  text-decoration: underline !important;
  font-size: clamp(1.1rem, 1.7vw, 1.15rem);
  font-weight: 400;
}

.panado-edu-share__terms:hover {
  color: var(--edu-red);
}

/* QR Card */
.panado-edu-share__card {
  background: var(--edu-white);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.panado-edu-share__card-left {
  flex: 0 0 34%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

.panado-edu-share__side-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.panado-edu-share__mobile-img {
  display: none;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.panado-edu-share__card-center {
  flex: 1 1 auto;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:1rem;
}

.panado-edu-share__card-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 10px;
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 12px;
}

.panado-edu-share__card-heading-red {
  color: var(--edu-red);
}

.panado-edu-share__card-heading-blue {
  color: var(--edu-blue);
}

.panado-edu-share__card-body {
  color: var(--edu-dark);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  max-width: 400px;
  margin: 0 auto;
}

.panado-edu-share__card-right {
  flex: 0 0 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.panado-edu-share__qr {
  max-width: 100%;
  height: auto;
  display: block;
}

.panado-edu-share__qr-placeholder {
  width: 140px;
  height: 140px;
  border: 2px dashed #ccc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  color: #888;
  padding: 12px;
}

/* ----- Mobile breakpoint ----- */
@media (max-width: 900px) {
  .panado-edu-hero {
    background: none;
    min-height: auto;
  }

  .panado-edu-hero__bg,
  .panado-edu-hero__corner,
  .panado-edu-hero__bg-right,
  .panado-edu-hero__inner {
    display: none;
  }

  .panado-edu-hero__mobile-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .panado-edu-howto__columns {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 40px;
  }

  .panado-edu-howto__left {
    padding: 24px 20px;
  }

  .panado-edu-howto__right {
    grid-row: 2;
    min-height: auto;
  }

  .panado-edu-howto__right-bg {
    display: none;
  }

  .panado-edu-howto__mobile-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .panado-edu-howto__corner {
    width: 36px;
  }
  .panado-edu-share__intro {
    font-size: 1.35rem;
    max-width: 20ch;
  }
  .panado-edu-howto__corner--br {
    display:none;
  }
  .panado-edu-howto__headline {
    text-align: center;
    justify-content: center;

  }

  .panado-edu-howto__steps .panado-edu-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 5px;
  }

  .panado-edu-step__content {
    text-align: center;
    align-items: center;
  }

  .panado-edu-share__card {
    flex-direction: column;
  }

  .panado-edu-share__card-left,
  .panado-edu-share__card-right {
    flex: 1 1 100%;
    width: 100%;
  }

  .panado-edu-share__card-center {
    padding: 24px 20px;
    gap: 1rem;
  }

  .panado-edu-share__side-img {
    display: none;
  }

  .panado-edu-share__mobile-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .panado-edu-share__card-left {
    flex: 1 1 100%;
    width: 100%;
    overflow: hidden;
  }
}