/* =========================================================
   ROUND A4.1 - ABOUT STORY MEDIA LAYOUT AND VALIDATION FIXES
   Horizontal editorial frames for chapters 01, 02, 03,
   05, 06 and 07, plus exact public-shell parity and
   responsive overflow closure. Shared by PT-BR and EN.
   ========================================================= */

/*
 * The story photos are presentation content, not thumbnails.
 * Keep the copy readable while giving every image enough width.
 */
.about-page .about-story .about-chapter-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}

/*
 * Every visual chapter gets a true horizontal frame.
 * The real image is fully visible with object-fit: contain.
 * A blurred copy fills the remaining space without duplicating
 * meaningful content in the DOM or cutting faces and context.
 */
.about-page .about-story .about-media {
  --about-media-source: none;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  place-items: center;
  padding: clamp(8px, 1.1vw, 14px);
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 26px;
  background: #090913;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.about-page .about-story .about-media::before {
  content: '';
  position: absolute;
  inset: -28px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image:
    linear-gradient(rgba(7, 7, 15, 0.28), rgba(7, 7, 15, 0.52)),
    var(--about-media-source);
  background-position: center;
  background-size: cover;
  filter: blur(24px) saturate(0.9);
  transform: scale(1.08);
}

.about-page .about-story .about-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%),
    linear-gradient(0deg, rgba(7, 7, 15, 0.18), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.about-page .about-story .about-media img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  background: rgba(9, 9, 19, 0.82);
  transform: none;
  transition: transform 420ms ease, filter 420ms ease;
}

.about-page .about-story .about-media:hover img {
  transform: scale(1.006);
  filter: brightness(1.025);
}

.about-page .about-story .about-media-label {
  z-index: 4;
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  margin: 0;
}

/* Source map used only by the decorative blurred background. */
.about-page .about-media--graduation {
  --about-media-source: url('/assets/photos-about/01%20-%20Formatura%20faculdade.jpg');
}

.about-page .about-media--australia {
  --about-media-source: url('/assets/photos-about/02%20-%20JP%20em%20Sydney.jpg');
}

.about-page .about-media--project {
  --about-media-source: url('/assets/photos-about/03%20-%20eu%20e%20meu%20amigo%20Walter%20conversando%20sobre%20o%20novo%20projeto.jpg');
}

.about-page .about-media--automation {
  --about-media-source: url('/assets/photos-about/04%20-%20eu%20configurando%20n8n%20pela%20primeira%20vez.jpg');
}

.about-page .about-media--intelligence {
  --about-media-source: url('/assets/photos-about/05%20-%20eu%20no%20escrit%C3%B3rio%20programando.jpg');
}

.about-page .about-media--transformation {
  --about-media-source: url('/assets/photos-about/06%20-%20Vit%C3%B3ria%20no%20ambiente%20de%20trabalho%20inovador%20%20.jpg');
}

/* Framing intent remains explicit even though the image is contained. */
.about-page .about-media--graduation img { object-position: 57% 34%; }
.about-page .about-media--australia img { object-position: 38% center; }
.about-page .about-media--project img { object-position: center 42%; }
.about-page .about-media--automation img { object-position: 54% 42%; }
.about-page .about-media--intelligence img { object-position: center 44%; }
.about-page .about-media--transformation img { object-position: center 38%; }

/*
 * Tablet and mobile keep the image before the copy. This makes
 * the visual story easy to scan and prevents alternating order
 * from becoming confusing in a single-column layout.
 */
@media (max-width: 1100px) {
  .about-page .about-story .about-chapter-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .about-page .about-story .about-media {
    order: 1 !important;
    width: min(100%, 900px);
    margin-inline: auto;
    aspect-ratio: 16 / 10;
  }

  .about-page .about-story .about-chapter-copy {
    order: 2 !important;
  }
}

@media (max-width: 680px) {
  .about-page .about-story .about-chapter-grid {
    gap: 1.35rem;
  }

  .about-page .about-story .about-media {
    aspect-ratio: 4 / 3;
    padding: 7px;
    border-radius: 20px;
  }

  .about-page .about-story .about-media img {
    border-radius: 14px;
  }

  .about-page .about-story .about-media-label {
    right: 12px;
    bottom: 12px;
    left: 12px;
    gap: 0.65rem;
    padding: 0.68rem 0.78rem;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .about-story .about-media img,
  .about-page .about-story .about-media:hover img {
    transform: none;
    transition: none;
  }
}


/* =========================================================
   ROUND A4.1 - VALIDATION CLOSURE
   Restore Home shell geometry after About-specific CSS and
   close the real responsive overflow exposed by Playwright.
   ========================================================= */

/*
 * about-story.css is loaded after public-header-parity.css and
 * previously redefined the channel row to 32px / 30px icons.
 * Home renders the same row at 28px, so the About page now uses
 * that exact desktop geometry instead of a tolerance workaround.
 */
@media (min-width: 1101px) {
  body.about-page nav.public-unified-header > #public-channel-status-top {
    min-height: 28px;
  }

  body.about-page nav.public-unified-header > #public-channel-status-top .public-channel-status__item {
    width: 28px;
    height: 28px;
  }
}

/*
 * about-story.css also resets .nav-links padding after the shared
 * header stylesheet. Reapply the Home menu contract with stronger,
 * page-scoped specificity: one column, inner gutters and full-width CTA.
 */
@media (max-width: 1100px) {
  body.about-page nav.public-unified-header .nav-links {
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.35rem !important;
    padding: 0.8rem max(3vw, 1rem) 1rem !important;
    box-sizing: border-box !important;
  }

  body.about-page nav.public-unified-header .nav-links > li,
  body.about-page nav.public-unified-header .nav-links > li > a,
  body.about-page nav.public-unified-header .public-header-mobile-start,
  body.about-page nav.public-unified-header .public-header-mobile-start .nav-cta {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * Explicit minmax(0, 1fr) contracts prevent the 420px / 460px /
   * 500px desktop minimums from leaking into single-column layouts
   * after the late-loaded polish stylesheet is attached.
   */
  body.about-page .about-hero-grid,
  body.about-page .about-story .about-chapter-grid,
  body.about-page .about-final-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.about-page .about-hero-grid > *,
  body.about-page .about-story .about-chapter-grid > *,
  body.about-page .about-final-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  body.about-page .about-story .about-media,
  body.about-page .about-story .about-chapter-copy,
  body.about-page .about-hero-visual,
  body.about-page .about-final .about-media {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  body.about-page .about-shell,
  body.about-page .about-shell--narrow {
    width: calc(100% - 28px);
    max-width: calc(100vw - 28px);
  }

  body.about-page .about-section-number,
  body.about-page .about-eyebrow,
  body.about-page .about-pill,
  body.about-page .about-question,
  body.about-page .about-button--primary,
  body.about-page .about-button--secondary {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.about-page .about-media-label {
    min-width: 0;
    max-width: calc(100% - 24px);
  }

  body.about-page .about-media-label > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}