/* ============================================================
   ABOUT US — page-specific styles
   Load AFTER styles.css. Everything here is scoped to this page;
   shared chrome, tokens, type scale, grid, and buttons all stay
   in styles.css so the other four pages aren't affected.
   ============================================================ */

/* --- Decoration layer ---------------------------------------
   Ornamental SVGs sit behind the content. Coordinates are taken
   from the Figma frame (1440-wide) and mapped onto this page via
   two anchors — the Our Mission heading and the Our Values
   heading — then expressed relative to .page-content's top.

   overflow-x: clip (not hidden) lets the clouds bleed past both
   page edges without making the page horizontally scrollable and
   without turning the vertical axis into a scroll container.
   ------------------------------------------------------------ */
.page-content { position: relative; overflow-x: clip; }

/* Mobile-only footer decoration scaffold — matches DinoDex's footer
   exactly; see the @media (max-width: 640px) block below. */
.footer-deco-m { display: none; position: absolute; pointer-events: none; }

.page-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-deco .deco { position: absolute; }

/* Content sits above the decorations. */
.section { position: relative; z-index: 1; }

/* Horizontal anchoring is deliberate, not arbitrary: pieces that
   hug a page edge in the design are pinned to that edge in px, so
   they keep bleeding off correctly at any desktop width; pieces
   that sit against content use a % of page width so they track it
   as the fluid grid resizes. Vertical offsets stay in px — they
   are measured from the 1440-wide Figma frame. */
.deco--marker         { top:  538px; left: 42.43%; width: 100px; }
.deco--cloud-pink-r   { top:  539px; right:  -83px; width: 281px; }
.deco--arrow-mission  { top: 1072px; left: 47.22%; width:  97px; }
.deco--cloud-blue-l   { top: 1076px; left:  -53px; width: 144px; }
.deco--cloud-pink-l   { top: 1767px; left: -153px; width: 281px; }
.deco--cloud-blue-r   { top: 1827px; right:  118px; width: 144px; }
.deco--cloud-blue-b   { top: 2866px; right:   30px; width: 144px; }
/* Laptop range only (1001-1800px) — the 2560px monitor keeps its
   existing position. */
@media (max-width: 1800px) {
  .deco--cloud-blue-b { top: 2851px; }
}

/* --- Hero ---------------------------------------------------
   styles.css hardcodes .hero at 600px. The About Us frame's hero
   is 476px, and the banner art is exactly 1440x476 (@2x), so at
   600px `object-fit: cover` would scale it up and crop both
   dinos out of frame. Overridden here for this page only.
   ------------------------------------------------------------ */
.hero { height: 476px; }
/* The sitewide 498px hero match below was scoped to >1800px only; a
   laptop (e.g. MacBook, ~1512px) fell through to the 476px base above
   instead. Match it here too — placed after the base rule so it wins
   the cascade tie at laptop widths. */
@media (max-width: 1800px) {
  .hero { height: 498px; }
}

/* --- Section rhythm ---------------------------------------- */
.section              { padding: 72px 0; }
.section--mission     { padding-top: 64px; }
.section--involved    { padding-bottom: 96px; }
/* Matches DinoDex's 110px gap under its hero at laptop widths (e.g.
   MacBook, ~1512px) — placed after the base rule so it wins the
   cascade tie there. */
@media (max-width: 1800px) {
  .section--mission { padding-top: 110px; }
}

/* --- Section heading (dot + Pulang title + subtitle) -------- */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  color: var(--color-text-secondary);
}

.section-heading__dot {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #52A7C2;
}

.section-subtitle {
  margin: 0 0 40px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-subtitle1-size);
  line-height: var(--text-subtitle1-lh);
  letter-spacing: var(--text-subtitle1-ls);
  color: var(--color-text-secondary);
}

/* Column placement for the two offset blocks.
   NOTE: don't pair a col-start-* utility with styles.css's
   .col-span-*. That class uses the `grid-column: span N`
   shorthand, which also sets grid-column-end: auto — overriding
   only the start leaves the end at auto and the item collapses
   to a single column. Set both lines in one declaration. */
.mission__copy   { grid-column: 7 / -1; }
.involved__media { grid-column: 8 / -1; }

/* --- Section photos -----------------------------------------
   The blonde frame is baked into the Figma exports (the Stay
   Involved one is a scalloped shape with real transparency),
   so no CSS border or radius here — adding one would double it.
   ------------------------------------------------------------ */
.framed-photo {
  width: 100%;
  height: auto;
}

/* --- Our Mission -------------------------------------------- */
.mission__media { align-self: start; }

.mission__copy p + p { margin-top: 24px; }
.mission__copy p     { margin: 0; color: var(--color-text-secondary); }

/* --- Sneak Peek carousel ------------------------------------
   Cards are a fixed width and run past the right grid margin,
   matching the bleed in the Figma frame. Horizontal scroll is
   the affordance; the row never wraps.

   Each export already contains its date, caption, dino badge and
   rounded corners, so the card is just a sized container — no
   overlay, no border-radius, no overflow clipping.
   ------------------------------------------------------------ */
/* Mission/Values keep their subtitle flush — the next row (photo/copy
   or value-cards) is a grid sibling inside the same .grid-12, so the
   grid's own 20px gap already supplies the spacing. Sneak Peek's
   carousel isn't a grid child, so it needs the 20px here instead. */
.section--mission .section-subtitle,
.section--values .section-subtitle {
  margin-bottom: 0;
}

.section--sneak .section-subtitle {
  margin-bottom: 20px;
}

.event-carousel {
  display: flex;
  gap: var(--grid-gutter);
  padding: 0 var(--grid-margin);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Mandatory snapping only ever rests at a valid snap point, and
     padding on the scroll container isn't one — so at rest it was
     always jumping past the left padding straight to card 1's
     edge, landing flush at x:0 instead of lined up with the page's
     margin like everything else. scroll-padding (unlike regular
     padding) IS honored by the snap algorithm, so "start" now
     correctly rests with the margin showing. */
  scroll-padding-left: var(--grid-margin);
  scroll-padding-right: var(--grid-margin);
  scrollbar-width: none;
  cursor: grab;
}
.event-carousel::-webkit-scrollbar { display: none; }
.event-carousel.is-dragging { cursor: grabbing; user-select: none; }

.event-card {
  flex: 0 0 503px;
  scroll-snap-align: start;
}

.event-card img {
  width: 100%;
  height: auto;
}

/* --- Our Values --------------------------------------------- */
.value-card {
  padding: 16px;
  border: 4px solid;
  border-radius: var(--radius-button);
  background: var(--color-bg);
}

/* #ACD87D is a design-lead correction and is not in the published
   Figma variables yet — worth asking for it as a real token so the
   other pages don't hardcode their own copy. */
.value-card--blue   { border-color: var(--color-accent-lightblue); }
.value-card--yellow { border-color: var(--color-accent-yellow); }
.value-card--green  { border-color: #ACD87D; }

.value-card__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px;
}

/* Matches the 64px icon height used by .info-card__head on the
   Getting Started / Flash Sales pages, for sizing consistency. */
.value-card__head img { height: 64px; width: auto; }

.value-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
}

.value-card p {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--color-text-secondary);
}

.value-card p + p { margin-top: 16px; }

/* --- Stay Involved ------------------------------------------ */
/* Positioning context for the CTA arrow below. */
.involved__copy { align-self: center; position: relative; }

/* The base arrow points down with its loop upper-left; rotate(90deg)
   swings the head to the left and the loop to upper-right, matching
   the Figma instance. Offsets put the arrowhead 10px inside the
   button's right edge and 20px below it, as in the design. */
.deco--arrow-discord {
  position: absolute;
  left: 216px;
  /* Anchored to the block's BOTTOM, which is the button's bottom edge —
     so the arrow follows the CTA if the heading rewraps at a narrower
     width, instead of drifting the way a top offset would. */
  bottom: -100px;
  width: 97px;
  z-index: -1;
  pointer-events: none;
  transform: rotate(120deg) scale(0.85);
}

.involved__title {
  margin: 0 0 8px;
  color: var(--color-text-secondary);
}

.involved__copy .section-subtitle { margin-bottom: 24px; }

.involved__media { align-self: center; }

/* --- Current-page nav state ---------------------------------
   styles.css has no active-page state for .main-nav__link, so
   this is scoped here for now. It belongs in styles.css instead
   — every page needs it, and five copies will drift. Worth
   asking the lead to promote it into the shared chrome.
   ------------------------------------------------------------ */
.main-nav__link--current {
  border-bottom-color: var(--color-text);
}

/* ============================================================
   MOBILE — 640px and below
   Measured from the 393px Figma frames. Breakpoint matches
   styles.css and the other pages.
   ============================================================ */
@media (max-width: 640px) {
  /* Footer: matches DinoDex's mobile footer exactly (same 2-column
     explicit grid, grass tiling and flat-PNG decorations), instead of
     this page's own footer falling back to styles.css's plainer shared
     mobile rules. */
  .site-footer { margin-top: 64px; }
  .footer-content { padding-bottom: 155px; }
  .footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 60px;
  }
  .footer-column:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer-column:nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer-column:nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer-column:nth-child(4) { grid-column: 2; grid-row: 2; }
  .footer-column:nth-child(5) { grid-column: 1; grid-row: 3; }
  .footer-grass {
    height: 45px;
    background-size: 195px 45px;
    background-image: url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg'), url('assets/grass.svg');
    background-position: -120px bottom, -10px bottom, 100px bottom, 210px bottom, 320px bottom;
  }
  .footer-deco { display: none; }
  .footer-deco-m { display: block; }
  .footer-deco-m--cloud1 { left: -30px; top: 18px; width: 42px; height: 47px; }
  .footer-deco-m--cloud2 { left: 264px; top: 354px; width: 95px; height: 57px; }
  .footer-deco-m--cloud3 { left: 352px; top: 152px; width: 46px; height: 45px; }
  .footer-deco-m--dino-blue { left: 21px; bottom: 0; width: 62px; height: 94px; }
  .footer-deco-m--dino-green { left: 86px; bottom: 0; width: 59px; height: 77px; }
  .footer-deco-m--flower1 { left: 187px; bottom: 0; width: 29px; height: 31px; }
  .footer-deco-m--flower2 { left: 164px; bottom: 0; width: 21px; height: 23px; }

  /* 40px top and bottom on each section gives the 80px separator
     between adjacent sections. */
  .section {
    padding: 40px 0;
  }
  .section--involved { padding-bottom: 56px; }

  /* Frame shows 297px, and the mobile art is a 786x598 crop (4:3),
     so at 393 wide it lands almost exactly without further cropping. */
  .hero {
    height: 297px;
  }

  /* The two halves of the title take different styles on mobile:
     "Hey! We're the" is H3, "Triceratops Club!" is Title. They stay
     inline on one line at desktop. */
  .hero__title-a,
  .hero__title-b {
    display: block;
  }

  .hero__title-a {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .hero__title-b {
    font-size: var(--text-title-size);
    line-height: var(--text-title-lh);
    letter-spacing: var(--text-title-ls);
  }

  .hero__subtitle {
    font-size: var(--text-subtitle2-size);
    line-height: var(--text-subtitle2-lh);
    letter-spacing: var(--text-subtitle2-ls);
  }

  .section-subtitle {
    margin-bottom: 24px;
  }

  /* ---------- Our Mission: photo above copy ---------- */
  /* Overrides the desktop `grid-column: 7 / -1`, which styles.css's
     generic column collapse cannot reach (this rule is more specific). */
  .mission__copy {
    grid-column: 1 / -1;
    margin-top: 24px;
  }

  /* ---------- Sneak Peek ---------- */
  /* Scaled up from the frame's 238px. Still narrower than the 353px
     content column, so the next card keeps peeking in — that overhang
     is what reads as "this row scrolls". */
  .event-card {
    flex: 0 0 300px;
  }
  .event-carousel {
    gap: 12px;
  }

  /* ---------- Our Values ---------- */
  /* Cards gain weight on mobile: 4px stroke and a 22px radius,
     against 2px/16px on desktop. */
  .section--values .grid-12 {
    row-gap: 24px;
  }

  .value-card {
    padding: 24px;
    border-width: 4px;
    border-radius: 22px;
  }

  .value-card__head img {
    width: 56px;
  }

  /* ---------- Stay Involved ---------- */
  /* The frame drops the group photo and centres the block. */
  .involved__media {
    display: none;
  }

  .involved__copy {
    grid-column: 1 / -1;
    text-align: center;
  }

  .involved__copy .btn-discord {
    margin: 0 auto;
  }

  /* Arrow points at a CTA that is now centred under its own heading,
     with no room beside it — the frame drops it too. */
  .deco--arrow-discord {
    display: none;
  }

  /* ---------- Decorations ---------- */
  /* Page decorations are placed against the 1440 comp and have no
     mobile positions yet, so they are hidden rather than guessed —
     except the marker, which the frame keeps beside Our Mission. */
  .page-deco .deco {
    display: none;
  }

  /* Removed from mobile per request (was previously the one .deco
     kept visible here, beside "Our Mission"). */
  .page-deco .deco--marker {
    display: none;
  }
}

/* ============================================================
   DESKTOP-ONLY (>1800px — e.g. a 2560x1440 monitor). Placed at the
   end of the file so it wins the cascade over the base rules above
   it (same selectors/specificity — later in source wins). ============================================================ */
@media (min-width: 1801px) {
  /* +100px side margin, matching DinoDex. Both .grid-12 (body
     content) and the shared .hero__content (hero TEXT — the hero
     photo itself stays full-bleed) read from --grid-margin, so
     overriding it at :root, scoped to this page's own stylesheet,
     moves both together without touching styles.css or any other
     page. Nav/footer don't use this variable outside their own
     ≤640px mobile rules, so they're unaffected. */
  :root { --grid-margin: 148px; }
  /* All hero banners sitewide match Getting Started's original
     498px (this page's own .hero override is normally 476px). */
  .hero { height: 498px; }
}