/* About Us Page Styles */

.about-us-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: var(--font-primary);
}

/* Shared section title/paragraph styles */
.about-block__title {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  color: #000000;
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 14px;
}

.about-block__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--brand-primary, #ff6600);
}

.about-block__paragraph {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #333333;
  margin: 0 0 18px 0;
}

.about-block__paragraph:last-child {
  margin-bottom: 0;
}

.about-block__paragraph strong {
  font-weight: 700;
}

/* Photo container: overflow:hidden + border-radius is the SINGLE source of
   truth for corner rounding on every image in these three sections. The <img>
   itself never carries its own border-radius — a smaller inset box (from a
   border) applying the same radius to its own corner produces a different,
   non-concentric curve than the container's, leaving a visible gap. */
.about-block__image,
.about-happiness__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Where Play Comes to Life / Where Play Has Purpose */
.about-block {
  max-width: 1186px;
  margin: 0 auto;
  padding: 64px 20px;
  display: flex;
  align-items: center;
  gap: 56px;
}

.about-block__media {
  flex: 1 1 0;
  min-width: 0;
}

.about-block__text {
  flex: 1 1 0;
  min-width: 0;
}

.about-block--life {
  flex-direction: row-reverse;
}

.about-block--life .about-block__media,
.about-block--purpose .about-block__media {
  position: relative;
  aspect-ratio: 939 / 642;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Decorative brand-color accent: a real border directly on the (rounded,
   border-box) photo container — the browser's own border-radius corner
   rendering naturally tapers the color into a smooth curve at the two far
   corners and produces nothing at all on the two untouched sides. This is
   the actual Figma treatment (confirmed by sampling the design file directly):
   full color at the anchor corner, a soft taper at each adjacent corner, and
   no accent at the far corner. Image 1 anchors top-left (border-top +
   border-left); image 3 mirrors it, anchoring bottom-right (border-bottom +
   border-right). */
.about-block--life .about-block__media {
  border-top: 14px solid var(--brand-primary, #ff6600);
  border-left: 14px solid var(--brand-primary, #ff6600);
}

.about-block--purpose .about-block__media {
  border-bottom: 14px solid var(--brand-primary, #ff6600);
  border-right: 14px solid var(--brand-primary, #ff6600);
}

/* Happiness, Handled End to End — photo in a bordered, rounded frame (same
   family as the other two sections, not full-bleed), text overlaid on its
   negative space. Confirmed against the Figma file: this section sits inside
   margins like the other two, not edge-to-edge. */
.about-happiness {
  padding: 64px 20px;
}

.about-happiness__frame {
  position: relative;
  max-width: 1186px;
  margin: 0 auto;
  aspect-ratio: 1787 / 809;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 2px solid var(--brand-primary, #ff6600);
}

.about-happiness__content {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  max-width: 420px;
  width: 100%;
}

/* Contact / Help Section */
.about-help {
  background: #f7f7f7;
  padding: 80px 20px;
}

.about-help__content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-help__eyebrow {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 16px 0;
}

.about-help__eyebrow-rule {
  display: block;
  width: 140px;
  height: 1px;
  margin: 0 auto 28px;
  background: rgba(0, 0, 0, 0.3);
}

.about-help__title {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 48px 0;
}

.about-help__cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
}

.about-help__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 220px;
  padding: 28px 20px;
  background: var(--brand-primary, #ff6600);
  border-radius: 16px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-help__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(255, 102, 0, 0.25);
}

.about-help__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand-primary, #ff6600);
}

.about-help__card-icon svg {
  width: 20px;
  height: 20px;
}

.about-help__card-label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.about-help__card-value {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  word-break: break-word;
}

.about-help__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
  transform: translateX(40px);
  text-align: left;
}

.about-help__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  font-style: normal;
}

.about-help__meta-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary, #ff6600);
  color: #ffffff;
}

.about-help__meta-icon svg {
  width: 20px;
  height: 20px;
}

.about-help__meta-text {
  padding-top: 2px;
  font-style: normal;
}

.about-help__meta-label {
  margin: 0 0 2px 0;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000000;
}

.about-help__meta-value {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .about-block {
    gap: 36px;
  }

  /* The <picture> element's desktop source only matches at min-width: 1024px
     (fixed in the shared responsive_static_image helper); below that it falls
     back to the tall mobile crop. Sections 1/3 tolerate that gracefully (a
     fixed-aspect-ratio + overflow:hidden container just crops the portrait
     image a bit tighter via object-fit: cover). This overlay section can't:
     its box relies on the wide desktop image's own proportions, so once the
     tall mobile image loads instead, the layout breaks outright. Fix: switch
     this section to its mobile-style single-card treatment at the SAME
     1024px breakpoint where the image variant actually changes, instead of
     the page's general 768px layout breakpoint. */
  .about-happiness {
    padding: 40px 0;
  }

  /* max-width is constrained (not 100%) here: this tall 390:1316 ratio is
     sized for an actual phone-width viewport. Left at full width on a wider
     tablet viewport, the same ratio stretches into an absurdly tall card
     with a huge empty gap between the text and the image. Only true mobile
     (the narrower query below) gets the full-bleed, edge-to-edge treatment. */
  .about-happiness__frame {
    aspect-ratio: 390 / 1316;
    max-width: 480px;
    margin: 0 auto;
    border-bottom-width: 2px;
  }

  /* object-fit: cover (the shared desktop default) crops the image whenever
     the actual viewport width doesn't land exactly on 390px — very common,
     since real devices vary (375, 393, 412px, etc). Use contain here so the
     complete mobile photo is always visible, letterboxing rather than
     cropping if the ratio is slightly off. */
  .about-happiness__image {
    object-fit: contain;
  }

  .about-happiness__content {
    top: 6%;
    right: 0;
    left: 0;
    transform: none;
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
  }

  .about-happiness .about-block__title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* The mobile crop's blank wall (the negative space this text sits in) is
     shorter than the full heading + two paragraphs, so the text was
     overflowing onto the teepee below. Tighten spacing only — font sizes for
     both the heading and paragraphs stay at their normal values. */
  .about-happiness__content .about-block__title {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .about-happiness__content .about-block__paragraph {
    margin-bottom: 10px;
  }

  .about-help__title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .about-block {
    flex-direction: column;
    padding: 40px 20px;
    gap: 24px;
  }

  .about-block--life .about-block__media,
  .about-block--purpose .about-block__media {
    /* Undo flex: 1 1 0 from the desktop row layout. An explicit flex-basis of 0
       overrides content-based (aspect-ratio-derived) sizing per spec, so in this
       column layout — where the flex main axis is height — the item collapsed
       to 0 height instead of sizing from aspect-ratio, since the auto-height
       parent has no extra space for flex-grow to distribute. */
    flex: none;
    aspect-ratio: 351 / 533;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }

  /* Section 3 reverses the stacking order on mobile: text first, then image —
     confirmed against the mobile Figma file. Section 1 keeps the natural DOM
     order (image first), so the two sections alternate. */
  .about-block--purpose .about-block__text {
    order: 1;
  }

  .about-block--purpose .about-block__media {
    order: 2;
  }

  /* On mobile both images anchor top-left, confirmed by sampling the mobile
     Figma file directly — image 3 (purpose) does NOT mirror its desktop
     bottom-right anchor here; both stacked cards use the same corner for a
     consistent vertical-list look. */
  .about-block--life .about-block__media,
  .about-block--purpose .about-block__media {
    border-top: 10px solid var(--brand-primary, #ff6600);
    border-left: 10px solid var(--brand-primary, #ff6600);
    border-right: none;
    border-bottom: none;
  }

  .about-block__title {
    text-align: center;
  }

  .about-block__title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .about-block__paragraph {
    text-align: center;
  }

  /* True phone widths only: full-bleed, edge-to-edge card (overriding the
     constrained, centered tablet width set at the 1024px breakpoint above). */
  .about-happiness__frame {
    max-width: 100%;
    margin: 0;
  }

  .about-help {
    padding: 48px 16px;
  }

  .about-help__title {
    font-size: 20px;
    margin-bottom: 32px;
  }

  .about-help__cards {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
  }

  .about-help__card {
    width: 100%;
    max-width: 280px;
  }

  .about-help__meta {
    transform: none;
  }

  .about-help__meta-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-help__meta-text {
    padding-top: 0;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .about-help__card {
    transition: none;
  }

  .about-help__card:hover {
    transform: none;
  }
}