/* ==========================================================================
   CASE — MODE
   Breakpoint: 800px  (mobile < 800px | laptop ≥ 800px)

   CR pattern (.mode-cr): solo full-width 4:5 block on mobile, becomes a
   1:1 square paired side-by-side with a sibling block at laptop (via
   .mode-pair). Same wrap/inner separation used throughout the AI Assistant
   case page: wrapper carries flex/position, inner box carries aspect-ratio,
   image is absolutely positioned (top:0;bottom:0;aspect-ratio;centered) so
   a square source image fills the box height and crops left/right.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties
-------------------------------------------------------------------------- */
:root {
  --mode-bg-white:       #ffffff;
  --mode-bg-grey:        #f1f1f2;
  --mode-bg-placeholder: #f7f7f8;
  --mode-text-0:         #000000;
  --mode-text-1:         #595959;
  --mode-text-2:         rgba(0, 0, 0, 0.8);
  --mode-font: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   Page base
-------------------------------------------------------------------------- */
html { background-color: var(--mode-bg-white); }

.case-page {
  width: 100%;
  font-family: var(--mode-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--mode-text-1);
  background-color: var(--mode-bg-white);
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. HERO — video background, logo + tagline
   Box ratio is clamped between 1:2 (min) and 16:9 (max) — same pattern as
   case-hero in the AI Assistant case. In between, the box fills 100vh and
   logo+tagline sit side by side in a single centered row; at the extremes
   the layout switches to the mobile (stacked) or laptop (split-half) look.
   ========================================================================== */
.mode-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--mode-text-0);
  flex-shrink: 0;
}

.mode-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default (in-between ratios): single row, logo + tagline centered */
.mode-hero__logo {
  position: absolute;
  top: 50%;
  left: 16.667%;
  transform: translateY(-50%);
  width: 94px;
  height: 28px;
}

.mode-hero__logo img { display: block; width: 100%; height: 100%; }

.mode-hero__tagline {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: max-content;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: var(--mode-bg-white);
  text-align: center;
}

/* Layout switch (independent of the box-ratio clamp below): the stacked
   layout applies for any ratio <= 1:1, not just down at the 1:2 extreme —
   logo centered in the top half, tagline centered at 50%/75% */
@media (max-aspect-ratio: 1/1) {
  .mode-hero__logo { top: 25%; left: 50%; transform: translate(-50%, -50%); }

  .mode-hero__tagline {
    top: 75%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: max-content; max-width: calc(100% - 48px);
    white-space: normal;
  }
}

/* Min ratio 1:2 — the box itself stops getting taller/narrower past this
   point; layout is already handled by the query above */
@media (max-aspect-ratio: 1/2) {
  .mode-hero { height: auto; aspect-ratio: 1 / 2; }
}

/* Max ratio 16:9 — wide/laptop: 12-column grid, logo col 4, tagline cols 8-10 */
@media (min-aspect-ratio: 16/9) {
  .mode-hero {
    height: auto; aspect-ratio: 16 / 9;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
  }

  .mode-hero__logo {
    position: relative; z-index: 1;
    top: auto; left: auto; bottom: auto; right: auto;
    transform: none;
    width: 94px; height: 28px;
    grid-column: 4; grid-row: 1;
    align-self: center; justify-self: center;
  }
  .mode-hero__logo img { width: 94px; height: 28px; }

  .mode-hero__tagline {
    position: relative; z-index: 1;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
    width: auto; max-width: none; white-space: normal;
    grid-column: 8 / span 3; grid-row: 1;
    align-self: center;
    font-size: 18px;
    text-align: left;
  }
}

/* ==========================================================================
   2. MODE TEXT — icon (looping video glyph) + headline + description
   ========================================================================== */
.mode-text {
  width: 100%;
  background-color: var(--mode-bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 80px 40px;
  flex-shrink: 0;
}

.mode-text__icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 17.5px rgba(255, 255, 255, 0.2));
  flex-shrink: 0;
}

/* ==========================================================================
   PENDANT ICON — shared base used by the ModeText icon and all 4
   ModeStatuses icons: a circular pendant photo (Pendant.Asset01.png),
   overscanned to fill the box, with an animated gif glyph cropped into a
   rounded inset window on top.
   ========================================================================== */
.pendant-icon { position: relative; overflow: hidden; }

.pendant-icon__base { position: absolute; inset: 0; overflow: hidden; }
.pendant-icon__base img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pendant-icon__glyph {
  position: absolute;
  inset: 7.5%;
  border-radius: 80px;
  overflow: hidden;
  background-color: #020202;
}
.pendant-icon__glyph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mode-text__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 600px;
}

.mode-text__headline { font-size: 16px; font-weight: 500; color: var(--mode-text-0); letter-spacing: -0.32px; }
.mode-text__desc { font-size: 16px; font-weight: 400; color: var(--mode-text-1); letter-spacing: -0.32px; }

/* ==========================================================================
   3. MODE BLOCK 02 — extra detail section
   Mobile: fixed 4:5 box, image fills remaining space (flex:1) above a
   fixed-height text block. Laptop: natural content flow, image keeps its
   own 5:3 ratio, no outer box ratio.
   ========================================================================== */
.mode-block02 {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--mode-bg-grey);
  overflow: hidden;
  flex-shrink: 0;
}

.mode-block02__img { width: 100%; flex: 1; min-height: 0; }
.mode-block02__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mode-block02__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  text-align: center;
  padding: 20px 40px 60px;
  flex-shrink: 0;
}

.mode-block02__headline { font-size: 16px; font-weight: 500; color: var(--mode-text-0); letter-spacing: -0.32px; }
.mode-block02__desc { font-size: 16px; font-weight: 300; color: var(--mode-text-2); letter-spacing: -0.32px; }

/* ==========================================================================
   PAIR — two CaseRatio blocks: stacked solo on mobile, side-by-side on laptop
   ========================================================================== */
.mode-pair {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
}

.mode-cr-wrap { width: 100%; flex-shrink: 0; }

.mode-cr {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: var(--mode-bg-placeholder);
}

.mode-cr--placeholder { background-color: var(--mode-bg-placeholder); }

.mode-cr__animation-wrap {
  position: absolute;
  left: -61%;
  right: -55%;
  top: calc(50% - 24px);
  transform: translateY(-50%);
  aspect-ratio: 1920 / 1080;
}
.mode-cr__animation-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

.mode-cr__frame {
  position: absolute;
  inset: 0;
}

.mode-cr__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mode-cr__frame .mode-cr__img--mobile { display: block; }
.mode-cr__frame .mode-cr__img--laptop { display: none; }

/* ==========================================================================
   5. MODE ARTWORK 02 — full-bleed, asset + ratio swap per breakpoint
   ========================================================================== */
.mode-artwork02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 768;
  overflow: hidden;
  flex-shrink: 0;
}

.mode-artwork02__img--mobile,
.mode-artwork02__img--laptop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mode-artwork02__img--laptop { display: none; }

/* ==========================================================================
   7. MODE STATUSES — 4 status rows + footer caption
   Own breakpoints (600 / 1200), independent of the page's 800px breakpoint:
   < 600 stacked column, 600–1199 a 2x2 grid, >= 1200 a single row.
   Each card groups its title+desc with a tight 2px gap, separate from the
   larger icon-to-text gap on the card itself.
   ========================================================================== */
.mode-statuses {
  width: 100%;
  background-color: var(--mode-bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 40px;
  flex-shrink: 0;
}

.mode-statuses__grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  padding-bottom: 80px;
}

.mode-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.mode-status__icon {
  width: 80px;
  height: 80px;
  display: block;
  filter: drop-shadow(0 0 17.5px rgba(255, 255, 255, 0.2));
}

.mode-status__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.mode-status__title { font-size: 17px; font-weight: 500; color: var(--mode-text-0); letter-spacing: -0.34px; text-align: center; }
.mode-status__desc { font-size: 17px; font-weight: 400; color: var(--mode-text-1); letter-spacing: -0.34px; text-align: center; }

.mode-statuses__caption {
  width: 162px;
  font-size: 17px;
  font-weight: 400;
  color: var(--mode-text-1);
  letter-spacing: -0.34px;
  text-align: center;
}

/* 600–1199: 2x2 grid, same type sizes as mobile */
@media (min-width: 600px) {
  .mode-statuses__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, fit-content(100%));
    column-gap: 20px;
    row-gap: 60px;
    padding-bottom: 80px;
  }
}

/* >= 1200: single row, bigger type — dedicated breakpoint, not the page's 800px one */
@media (min-width: 1200px) {
  .mode-statuses { padding: 120px 40px; }
  .mode-statuses__grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 1200px;
    padding: 80px 0;
  }
  .mode-status { flex: 1; min-width: 0; gap: 24px; padding-top: 24px; }
  .mode-status__title,
  .mode-status__desc { font-size: 20px; letter-spacing: -0.4px; }
  .mode-statuses__caption { width: auto; font-size: 20px; letter-spacing: -0.4px; }
}

/* ==========================================================================
   9. MODE ARTWORK 03 — image + caption in 3-row grid
   min-width breakpoints: < 800 (4:5), 800–1199 (4:3), ≥ 1200 (4:3 bigger)
   ========================================================================== */
.mode-artwork03 {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background-color: var(--mode-bg-white);
  overflow: hidden;
  flex-shrink: 0;
}

/* Image: fills top 66.8%, height-constrained, overflows left/right */
.mode-artwork03__img-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 33.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mode-artwork03__img {
  flex: 1 0 0;
  min-height: 1px;
  position: relative;
  aspect-ratio: 4096/2400;
}

.mode-artwork03__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Grid overlay: 3 rows, caption in row 3 */
.mode-artwork03__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 0.75fr;
}

.mode-artwork03__caption {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
}

.mode-artwork03__caption p {
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
  line-height: 1.3;
  letter-spacing: -0.3px;
  text-align: center;
}

.mode-artwork03__logo {
  display: block;
  height: 20px;
  width: auto;
}

/* 800–1199px: 4:3, top-anchored image, 3 equal rows, caption centered */
@media (min-width: 800px) {
  .mode-artwork03 { aspect-ratio: 4/3; }

  .mode-artwork03__img-wrap {
    bottom: auto;
    display: block;
    aspect-ratio: 4096/2400;
  }

  .mode-artwork03__img {
    position: absolute;
    inset: 0;
    flex: none;
    min-height: 0;
    aspect-ratio: auto;
  }

  .mode-artwork03__grid {
    grid-template-rows: repeat(3, 1fr);
  }

  .mode-artwork03__caption {
    align-self: center;
    gap: 28px;
  }
}

/* 1200px+: bigger text and logo */
@media (min-width: 1200px) {
  .mode-artwork03__caption { gap: 72px; }
  .mode-artwork03__caption p { font-size: 20px; letter-spacing: -0.4px; }
  .mode-artwork03__logo { height: 28px; }
}

/* ==========================================================================
   LAPTOP — min-width: 800px
   ========================================================================== */
@media (min-width: 800px) {

  /* ---- 2. Mode Text: bigger padding/gap ---- */
  .mode-text { padding: 160px 80px; gap: 40px; }
  .mode-text__copy { gap: 12px; max-width: 1000px; }
  .mode-text__headline,
  .mode-text__desc { font-size: 20px; letter-spacing: -0.4px; }

  /* ---- 3. Mode Block 02: natural content flow, image keeps its own ratio.
     Each paragraph gets its own fixed width (not just the shared container's)
     so the line breaks match the designer's intended wrap points. ---- */
  .mode-block02 { aspect-ratio: auto; overflow: visible; }
  .mode-block02__img { flex: none; aspect-ratio: 5 / 3; }
  .mode-block02__copy { max-width: 600px; padding: 40px 0 120px; }
  .mode-block02__headline,
  .mode-block02__desc { font-size: 20px; letter-spacing: -0.4px; }
  .mode-block02__headline { width: 376px; }
  .mode-block02__desc { width: 446px; }

  /* ---- 4/6/8. Pairs: side by side, square ratio ---- */
  .mode-pair { flex-direction: row; }
  .mode-cr-wrap { flex: 1; min-width: 0; }
  .mode-cr { aspect-ratio: 1 / 1; }

  /* On laptop the source images are 1:1 squares; the frame centers a 1:1 crop */
  .mode-cr__frame {
    inset: auto;
    top: 0; bottom: 0;
    left: 50%; transform: translateX(-50%);
    aspect-ratio: 1 / 1;
  }

  .mode-cr__frame .mode-cr__img--mobile { display: none; }
  .mode-cr__frame .mode-cr__img--laptop { display: block; }

}

/* ==========================================================================
   MODE ARTWORK 02 — own breakpoint (1600), independent of the page's 800px
   one. Component variants stay 4:3 / Asset02 from 0 up to 1600px width;
   only at >= 1600 does it switch to 16:9 / Asset01.
   ========================================================================== */
@media (min-width: 1600px) {
  .mode-artwork02 { aspect-ratio: 1132 / 747; }
  .mode-artwork02__img--mobile { display: none; }
  .mode-artwork02__img--laptop { display: block; }
}