/* ==========================================================================
   Teen Camp — application styles

   Sections:
     1. Reset & base
     2. Fonts
     3. Screens (views & modals) + slide transitions
     4. Layout helpers (centering wrapper, grid)
     5. Buttons
     6. Screen-specific styles (home, modules, video, question, countdown)
     7. Color palettes (per lesson)
     8. Responsive
   ========================================================================== */

/* 1. Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

body {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  color: #232c30;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: 'hoch';
  src: url('../webfonts/hochstadt-rounded-webfont.woff2') format('woff2'),
       url('../webfonts/hochstadt-rounded-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.display-font {
  font-family: 'hoch', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. Screens & transitions ------------------------------------------------- */
/* Views: full-screen pages that slide horizontally. */
[data-role='view'] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #eaeaea;
  overflow: hidden;
  transform: translate3d(100%, 0, 0); /* parked off-screen right until active */
  pointer-events: none;
  backface-visibility: hidden;
  animation-duration: 0.425s;
  animation-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
  animation-fill-mode: forwards;
}

[data-role='view'].view-active {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.view-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5em;
}

.view-enter-right { animation-name: enter-from-right; z-index: 1; }
.view-enter-left  { animation-name: enter-from-left;  z-index: 1; }
.view-exit-left   { animation-name: exit-to-left;     z-index: 0; }
.view-exit-right  { animation-name: exit-to-right;    z-index: 0; }

@keyframes enter-from-right {
  from { transform: translate3d(100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes enter-from-left {
  from { transform: translate3d(-30%, 0, 0); filter: brightness(65%); }
  to   { transform: translate3d(0, 0, 0);    filter: brightness(100%); }
}
@keyframes exit-to-left {
  from { transform: translate3d(0, 0, 0);     filter: brightness(100%); }
  to   { transform: translate3d(-30%, 0, 0);  filter: brightness(65%); }
}
@keyframes exit-to-right {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}

/* Modals: overlays that slide up from the bottom. */
[data-role='modal'] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 3;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.475s cubic-bezier(0.4, 0.6, 0.05, 1);
}

[data-role='modal'].modal-open {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

[data-role='modal'] .view-content {
  padding: 56px 28px;
}

/* 4. Layout helpers -------------------------------------------------------- */
/* Vertical+horizontal centering wrapper. */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wrapper .container {
  width: 100%;
}

/* Modules screen: a 3x2 grid of cards that keep their natural aspect ratio and
   shrink to fit the viewport (rather than stretching to fill it).

   The trick is to size each column's width from the available *height*: a card
   is --card-aspect (width:height), there are 2 rows plus one gap plus padding,
   so the widest a column can be while 2 rows still fit vertically is
   `(usableHeight - gap) / 2 * card-aspect`. We also cap it so 3 columns fit the
   width. The grid is centered in the leftover space. */
.grid {
  --gap: 20px;
  --pad: 20px;
  --card-aspect: 0.847; /* 1 / 1.18 — square image + description bar */
  /* Widest a column can be while 2 rows still fit the viewport height.
     usable height = 100vh - 2*pad - 1 gap, split across 2 rows, times aspect. */
  --col-from-height: calc((100vh - 2 * var(--pad) - var(--gap)) / 2 * var(--card-aspect));
  /* Widest a column can be while 3 columns fit the viewport width. */
  --col-from-width: calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3);

  display: grid;
  grid-template-columns: repeat(3, min(var(--col-from-width), var(--col-from-height)));
  grid-template-rows: repeat(2, auto);
  justify-content: center;
  align-content: center;
  gap: var(--gap);
  padding: var(--pad);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* 5. Buttons --------------------------------------------------------------- */
.button {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  transform: scale(1);
  filter: brightness(1);
  transition: transform 0.35s, filter 0.35s;
}
.button:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* 6. Screen-specific ------------------------------------------------------- */

/* Close button (top-right, on all screens except home & modules). */
#close-btn {
  position: fixed;
  top: 0;
  right: 0;
  margin: 24px 24px 0 0;
  padding: 8px;
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  z-index: 5;
  color: #d0d0d0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, color 0.35s;
}
#close-btn.active {
  opacity: 1;
  pointer-events: auto;
}
#close-btn svg {
  width: 100%;
  height: 100%;
}

/* Home / title screen. */
#home {
  background: url('../img/title-bg.jpg') no-repeat center / cover;
}
#home .logo {
  width: 420px;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}
#home .button,
.question .button {
  display: block;
  width: 312px;
  max-width: 80%;
  margin: 52px auto 0;
  padding: 14px;
  background-color: #cdc818;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
  font-weight: 700;
  color: #7f7c00;
  font-size: 24px;
}

/* Modules screen. */
#modules .view-content {
  padding: 0;
}
/* The grid sizes each column so the card fills its cell width and derives its
   height from the aspect ratio (square image + description bar). */
.lesson-card {
  display: block;
  min-width: 0;
}
.preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* square image (1:1) plus the description bar below it */
  aspect-ratio: 1 / 1.18;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.35s;
}
.preview-card:active {
  transform: scale(0.96);
}
.preview-card .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* square hero image */
  background: #ccc;
  overflow: hidden;
}
.preview-card .hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-card .title {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 60%;
  font-family: 'hoch', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
  line-height: 1;
  text-align: left;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
}
.preview-card .tag {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  padding: 8px 24px;
  border-radius: 0 4px 0 4px;
  background-color: #79b933;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}
.preview-card .description {
  position: relative;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}
.preview-card .description .play {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 4px;
  background-color: #cdc818;
  color: #7f7c00;
  border-radius: 4px;
}
.preview-card .description .play svg {
  width: 100%;
  height: 100%;
}

/* Video screens (module & instructions). */
#module .view-content,
#instructions .view-content {
  overflow: hidden;
  padding: 0;
}
/* The display fills the screen and centers the video box within it. */
.video-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaeaea;
}
/* The video is constrained to its 4:3 aspect ratio and scaled to fit the
   available space, so it fills its box without black letterbox bars. */
.video-display video {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.video-display .play-overlay,
.video-display .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.video-display .play-overlay {
  width: 128px;
  height: 128px;
  color: #d0d0d0;
  transition: opacity 0.35s;
}
.video-display .play-overlay svg {
  width: 100%;
  height: 100%;
}
.video-display.loading .play-overlay {
  opacity: 0;
  pointer-events: none;
}
.video-display .spinner {
  width: 72px;
  height: 72px;
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  animation: spin 0.8s linear infinite;
}
.video-display.loading .spinner {
  opacity: 1;
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Video controls + skip button (fixed, bottom/top right). */
[data-role='controls'],
[data-role='skip'] {
  position: fixed;
  z-index: 5;
  width: 56px;
  height: 56px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, color 0.35s;
}
[data-role='controls'] svg,
[data-role='skip'] svg {
  width: 100%;
  height: 100%;
}
[data-role='controls'] {
  bottom: 24px;
  right: 24px;
}
[data-role='skip'] {
  top: 24px;
  right: 24px;
}
[data-role='controls'].active,
[data-role='skip'].active {
  opacity: 1;
  pointer-events: auto;
}

/* Question modal + countdown's final question share .question styling. */
#question .wrapper {
  padding: 0 36px;
}
.question .icon {
  width: 156px;
  height: 156px;
  margin: 0 auto 28px;
  background: url('../img/question-mark-aqua.png') no-repeat center / 100%;
}
.question .headline {
  font-family: 'hoch', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
  font-size: 64px;
  color: #009aa8;
}
.question .question-text {
  font-size: 32px;
  line-height: 1.5em;
  margin-top: 18px;
}

/* Countdown screen. */
#countdown .label {
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
}
#countdown .timer {
  font-family: 'hoch', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
  font-size: 156px;
  margin-top: -24px;
}

/* 7. Color palettes -------------------------------------------------------- */
/* Each lesson sets one of these classes on <body>. The values match the
   original design exactly. */
.green     { --theme: #5d9c42; --tag: #6e9a35; }
.aqua      { --theme: #029aa8; --tag: #0098a5; }
.orange    { --theme: #f47721; --tag: #f47721; }
.blue      { --theme: #00abe8; --tag: #00abe8; }
.dark-blue { --theme: #00529b; --tag: #00529b; }
.yellow    { --theme: #cdc818; --tag: #cdc818; }

/* Themed elements pick up the active palette via the --theme variable. */
.green #close-btn, .aqua #close-btn, .orange #close-btn,
.blue #close-btn, .dark-blue #close-btn, .yellow #close-btn {
  color: var(--theme);
}
[class~='green'] .video-display .play-overlay,
.green [data-role='controls'], .green [data-role='skip'],
.aqua .video-display .play-overlay, .aqua [data-role='controls'], .aqua [data-role='skip'],
.orange .video-display .play-overlay, .orange [data-role='controls'], .orange [data-role='skip'],
.blue .video-display .play-overlay, .blue [data-role='controls'], .blue [data-role='skip'],
.dark-blue .video-display .play-overlay, .dark-blue [data-role='controls'], .dark-blue [data-role='skip'],
.yellow .video-display .play-overlay, .yellow [data-role='controls'], .yellow [data-role='skip'] {
  color: var(--theme);
}
.green #countdown .timer, .green .question .headline,
.aqua #countdown .timer, .aqua .question .headline,
.orange #countdown .timer, .orange .question .headline,
.blue #countdown .timer, .blue .question .headline,
.dark-blue #countdown .timer, .dark-blue .question .headline,
.yellow #countdown .timer, .yellow .question .headline {
  color: var(--theme);
}

/* Lesson card tag color (set directly on the card, not via body). */
.preview-card.green .tag     { background-color: #6e9a35; }
.preview-card.aqua .tag      { background-color: #0098a5; }
.preview-card.orange .tag    { background-color: #f47721; }
.preview-card.blue .tag      { background-color: #00abe8; }
.preview-card.dark-blue .tag { background-color: #00529b; }
.preview-card.yellow .tag    { background-color: #cdc818; }

/* Palette-specific question-mark icon. */
.green .question .icon     { background-image: url('../img/question-mark-green.png'); }
.aqua .question .icon      { background-image: url('../img/question-mark-aqua.png'); }
.orange .question .icon    { background-image: url('../img/question-mark-orange.png'); }
.blue .question .icon      { background-image: url('../img/question-mark-blue.png'); }
.dark-blue .question .icon { background-image: url('../img/question-mark-dark-blue.png'); }
.yellow .question .icon    { background-image: url('../img/question-mark-yellow.png'); }

/* 8. Responsive ------------------------------------------------------------ */
@media screen and (max-width: 864px) {
  .preview-card .description {
    padding: 12px;
  }
}

@media screen and (max-width: 600px) {
  /* On small screens, switch to 2 columns of natural-height cards and let the
     grid scroll vertically instead of cramming everything into one viewport. */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
    height: 100%;
    overflow-y: auto;
  }
  #home .logo {
    width: 280px;
  }
  .question .headline {
    font-size: 44px;
  }
  .question .question-text {
    font-size: 24px;
  }
  #countdown .timer {
    font-size: 96px;
  }
}