/* Explicit layout for the CURRENT AboutPage build.
   The older production Tailwind bundle predates some utilities used by AboutPage.tsx. */

html,body{background:#0a0a0b}
*,*::before,*::after{box-sizing:border-box}

/* page root / header compensation */
.pt-20{padding-top:5rem}

/* widths from Tailwind defaults */
.max-w-4xl{max-width:56rem!important}
.max-w-6xl{max-width:72rem!important}
.max-w-8xl{max-width:90rem!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}

/* horizontal padding */
.px-4{padding-left:1rem!important;padding-right:1rem!important}

/* hero */
.py-24{padding-top:6rem!important;padding-bottom:6rem!important}

/* section bottom gaps */
.mb-16{margin-bottom:4rem!important}
.mb-20{margin-bottom:5rem!important}

/* actual AboutPage card padding */
.p-8{padding:2rem!important}
.p-6{padding:1.5rem!important}

/* grid gaps */
.gap-6{gap:1.5rem!important}
.gap-4{gap:1rem!important}
.gap-8{gap:2rem!important}

/* Make sure the page sections remain centered and never stretch like the incorrect version */
main > section.max-w-4xl,
main > section.max-w-6xl{
    width:100%;
}

/* Hero vertical position/scale */
main > section:first-child{
    min-height:13rem;
}
main > section:first-child .max-w-4xl{
    max-width:56rem!important;
}

/* About body follows the same compact reading width visible on live page */
main > section:nth-of-type(2){
    max-width:56rem!important;
}

/* Mission/Vision: centered two-column block */
main > section:nth-of-type(3){
    max-width:56rem!important;
}
main > section:nth-of-type(3) > .grid{
    width:100%;
}

/* What We Cover and Stats are slightly wider but still centered */
main > section:nth-of-type(4),
main > section:nth-of-type(5){
    max-width:72rem!important;
}

/* Production Partner uses reading width */
main > section:nth-of-type(6){
    max-width:56rem!important;
}

/* Header should stay compact like live site */
header .max-w-8xl{
    max-width:72rem!important;
}

/* Footer should not visually blow out the page */
footer .max-w-8xl{
    max-width:72rem!important;
}

/* Current page card appearance */
.cinema-surface{
    background:#131316;
    border:1px solid #2a2a30;
}
.rounded-3xl{border-radius:1.5rem!important}
.rounded-2xl{border-radius:1rem!important}

/* Responsive behavior from the React/Tailwind source */
@media (min-width:640px){
  .sm\:px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}
}
@media (min-width:768px){
  .md\:py-32{padding-top:8rem!important;padding-bottom:8rem!important}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .md\:flex-row{flex-direction:row!important}
  .md\:text-6xl{font-size:3.75rem!important;line-height:1!important}
  .md\:text-xl{font-size:1.25rem!important;line-height:1.75rem!important}
  .md\:text-lg{font-size:1.125rem!important;line-height:1.75rem!important}
}
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem!important;padding-right:2rem!important}
}

/* Mobile */
@media(max-width:767px){
  main > section:nth-of-type(3),
  main > section:nth-of-type(4),
  main > section:nth-of-type(5),
  main > section:nth-of-type(6){max-width:100%!important}
}

/* Better match live About screen density */
main > section:nth-of-type(2){margin-top:.25rem}
main > section:nth-of-type(3){margin-top:1rem}
main > section:nth-of-type(4){margin-top:.75rem}


/* Production Partner — match current live page / supplied screenshot.
   Important: the Advice logo PNG is a square canvas with transparent space.
   Do not force it to h-14; the real component lets that canvas create the tall card. */
.production-partner-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:1.75rem;
  padding:2rem;
  min-height:34rem;
  overflow:hidden;
}

.production-partner-logo{
  flex:0 0 34rem;
  width:34rem;
  height:34rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.production-partner-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.production-partner-copy{
  flex:0 0 11rem;
  width:11rem;
}

.production-partner-copy p{
  margin:0;
  line-height:1.9;
  text-align:right;
}

@media(max-width:767px){
  .production-partner-card{
    flex-direction:column;
    min-height:auto;
    padding:1.5rem;
    gap:1rem;
  }
  .production-partner-logo{
    flex:0 0 auto;
    width:min(100%,26rem);
    height:auto;
    aspect-ratio:1;
  }
  .production-partner-copy{
    flex:0 0 auto;
    width:100%;
  }
  .production-partner-copy p{
    text-align:center;
  }
}