/* PI AI CREATIVE STUDIO
   RESPONSIVE UI/UX UPGRADE V3.1 — SOURCE-VERIFIED FULL LAYOUT FIX
   Target: resources/views/public/landing.blade.php
   UI only. No DB / provider / story / auth / route changes. */

:root{
  --v31-page-max:1440px;
  --v31-gutter:clamp(18px,3vw,48px);
  --v31-gap:clamp(16px,1.6vw,24px);
  --v31-radius:22px;
  --v31-touch:48px;
}

/* V3.1_SOURCE_VERIFIED */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
main{width:100%;max-width:none;min-width:0}

/* The real Blade uses .wrap, not .container. */
body .wrap{
  width:min(calc(100% - (var(--v31-gutter) * 2)),var(--v31-page-max))!important;
  max-width:var(--v31-page-max)!important;
  margin-inline:auto!important;
  min-width:0!important;
}

/* Full-width page bands, centered inner content. */
.nav,.hero,main>.section,footer{width:100%;min-width:0}
.section{padding-block:clamp(48px,6vw,84px)}
.soft{width:100%}

/* Navigation */
.nav-inner{min-height:72px;gap:24px}
.brand{min-width:0;font-size:clamp(15px,1.25vw,19px);letter-spacing:.01em}
.menu{min-width:0;justify-content:flex-end;flex-wrap:wrap}
.menu a{min-height:44px;display:inline-flex;align-items:center}

/* Hero — actual markup: .hero > .wrap.hero-grid */
.hero{padding:clamp(58px,7vw,96px) 0 clamp(54px,6vw,82px)}
.hero-grid{
  width:min(calc(100% - (var(--v31-gutter) * 2)),var(--v31-page-max))!important;
  max-width:var(--v31-page-max)!important;
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr)!important;
  gap:clamp(32px,4.5vw,76px)!important;
  align-items:center!important;
}
.hero-grid>div{min-width:0}
.hero h1{
  font-size:clamp(42px,4.7vw,76px)!important;
  line-height:1.02!important;
  max-width:900px;
}
.lead{font-size:clamp(17px,1.35vw,21px)!important;max-width:760px}
.hero-actions{gap:12px}
.hero-actions .btn{min-height:var(--v31-touch);padding-inline:22px}
.hero-image{
  width:100%!important;
  max-width:700px!important;
  min-height:clamp(360px,36vw,560px)!important;
  justify-self:end;
}
.hero-image img{width:100%;height:100%;max-height:560px;object-fit:cover}

/* Section headings */
.section-head{max-width:860px!important;margin-bottom:clamp(28px,3vw,42px)!important}
.section-head h2{font-size:clamp(30px,3.2vw,48px)!important;line-height:1.15}

/* Real CMS grids in the current Blade. */
.grid{gap:var(--v31-gap)!important}
.features{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.promo-grid,.plans,.learning-grid,.testimonial-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.video-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

.card{
  min-width:0!important;
  max-width:100%!important;
  border-radius:var(--v31-radius)!important;
  padding:clamp(20px,2vw,28px)!important;
}
.card h3{line-height:1.3}
.card .btn{min-height:44px}

/* Pricing should remain readable even when there are many plans. */
.plans .card{display:flex;flex-direction:column}
.plans .card .btn{margin-top:auto}
.price{font-size:clamp(32px,3vw,44px)!important}

/* Existing 3-studio block is outside <main>; expand it using its real classes. */
.pi-v13-wrap{
  width:min(calc(100% - (var(--v31-gutter) * 2)),var(--v31-page-max))!important;
  max-width:var(--v31-page-max)!important;
  margin:clamp(44px,6vw,84px) auto!important;
  padding:0!important;
}
.pi-v13-hero{
  width:100%!important;
  max-width:none!important;
  padding:clamp(24px,3vw,42px)!important;
  border-radius:28px!important;
}
.pi-v13-hero h2{font-size:clamp(30px,3.5vw,52px)!important}
.pi-v13-hero>p{max-width:900px!important;font-size:clamp(15px,1.2vw,18px)}
.pi-v13-grid{
  width:100%!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--v31-gap)!important;
}
.pi-v13-card{
  min-width:0!important;
  min-height:250px!important;
  padding:clamp(20px,2vw,28px)!important;
  border-radius:22px!important;
}
.pi-v13-card h3{font-size:clamp(19px,1.6vw,24px)!important}
.pi-v13-card p{font-size:14px!important}

/* Footer */
.footer-grid{grid-template-columns:minmax(0,2fr) minmax(220px,1fr)!important}

/* Overflow safety */
img,video,svg,canvas,iframe{max-width:100%;height:auto}
h1,h2,h3,p,li,a,button{overflow-wrap:anywhere}
pre,code{max-width:100%;overflow:auto}
table{max-width:100%}

/* Laptop / tablet */
@media (max-width:1199px){
  :root{--v31-gutter:24px}
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(340px,.85fr)!important;
    gap:32px!important;
  }
  .features{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr!important}
  .hero-image{max-width:760px!important;justify-self:center;min-height:320px!important}
  .promo-grid,.plans,.learning-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pi-v13-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .menu{display:none!important}
}

/* Mobile */
@media (max-width:700px){
  :root{--v31-gutter:14px;--v31-radius:16px}
  body .wrap,
  .hero-grid,
  .pi-v13-wrap{
    width:calc(100% - 28px)!important;
    max-width:none!important;
  }
  .nav-inner{min-height:62px}
  .brand{font-size:15px}
  .hero{padding:46px 0 42px}
  .hero-grid{gap:24px!important}
  .hero h1{font-size:clamp(36px,11vw,52px)!important;letter-spacing:-.035em!important}
  .lead{font-size:16px!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .hero-actions .btn{width:100%!important;min-height:48px;justify-content:center}
  .hero-image{min-height:260px!important;border-radius:20px!important}
  .features,.promo-grid,.plans,.video-grid,.learning-grid,.testimonial-grid,.pi-v13-grid{
    grid-template-columns:1fr!important;
  }
  .section{padding-block:42px}
  .card{padding:20px!important}
  .pi-v13-hero{padding:22px!important;border-radius:20px!important}
  .pi-v13-card{min-height:210px!important}
  .footer-grid{grid-template-columns:1fr!important}
}

@media (max-width:380px){
  :root{--v31-gutter:10px}
  body .wrap,.hero-grid,.pi-v13-wrap{width:calc(100% - 20px)!important}
  .hero h1{font-size:34px!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}