/* CDA responsive layout: content determines columns; portrait and landscape share rules. */
@layer cda-responsive-type {
 html body.institutional-page main#contenido {overflow-wrap:break-word}
 html body.institutional-page #inicio .hero-service-details :is(p,a){overflow-wrap:anywhere}
 html body.institutional-page #somos .purpose-age-card>summary{min-height:64px}
 html body.institutional-page #palabra-del-dia button{min-height:44px}
 html body.institutional-page #discipulado-integral>article>img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;max-height:520px!important;background:#f7f2e8}
 html body.institutional-page .site-footer :is(a,p){overflow-wrap:anywhere}
 html body.institutional-page .cda-essential .cda-account-nav{max-height:calc(100dvh - 120px);overscroll-behavior:contain}
 @media(max-width:1023px){
  html body.institutional-page #inicio.hero{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding:24px clamp(16px,4vw,32px) 40px!important;width:100%!important;max-width:none!important;--cda-cover-height:clamp(240px,55vw,460px)!important;--cda-cover-ratio:auto!important}
  html body.institutional-page #inicio .hero-visual{grid-area:1/1!important;order:0!important;min-width:0}
  html body.institutional-page #inicio .hero-copy{grid-area:2/1!important;order:1!important;width:100%!important;max-width:720px!important;margin-inline:auto!important}
  html body.institutional-page #inicio .hero-photo-wrap{height:var(--cda-cover-height)!important;min-height:0!important;width:100%!important}
  html body.institutional-page #inicio h1{font-size:clamp(2rem,5.5vw,3rem)!important;line-height:1.14!important;max-width:22ch;margin-inline:auto}
  html body.institutional-page #inicio .hero-lead{font-size:1rem!important;max-width:65ch!important;margin-inline:auto!important}
  html body.institutional-page #somos.church-purpose-section{display:flex!important;flex-direction:column!important;gap:24px!important;padding-inline:clamp(16px,4vw,32px)!important;width:100%!important;max-width:none!important}
  html body.institutional-page #somos.church-purpose-section>.eyebrow{order:0;margin-bottom:0}
  html body.institutional-page #somos.church-purpose-section>.essence-copy{order:1!important;width:100%!important;max-width:72ch!important;margin:0 auto!important}
  html body.institutional-page #somos.church-purpose-section>figure{order:2!important;width:100%!important;max-width:820px!important;margin:0 auto!important}
  html body.institutional-page #somos.church-purpose-section>.purpose-ages{order:3!important;width:100%!important;margin-top:0!important}
  html body.institutional-page #somos.church-purpose-section>figure>img{height:auto!important;aspect-ratio:3/2!important;object-fit:cover!important}
  html body.institutional-page #somos #essence-title .cda-purpose-title-main{font-size:clamp(1.9rem,4.5vw,2.6rem)!important}
  html body.institutional-page #somos .purpose-age-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 }
 @media(max-width:819px){
  html body.institutional-page #palabra-del-dia.cda-daily-card{display:block!important;width:100%!important;max-width:none!important;margin-inline:0!important;border:1px solid #c6a14b;border-radius:16px!important}
  html body.institutional-page #palabra-del-dia>.cda-daily-devotional{border-left:0!important;border-top:1px solid #dfc88b!important}
  html body.institutional-page #palabra-del-dia :is(.cda-daily-promise,.cda-daily-devotional){padding:24px clamp(16px,4vw,28px)!important}
 }
 @media(max-width:599px){
  html body.institutional-page #somos .purpose-age-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.institutional-page #inicio .hero-caption{position:static!important;max-width:100%!important;margin:12px 0 0!important;padding:12px 16px!important}
  html body.institutional-page #inicio .hero-carousel-controls{justify-content:center}
  html body.institutional-page #somos.church-purpose-section .essence-copy>:is(.church-purpose-paragraph,.purpose-ages-connection){text-align:start!important;hyphens:auto}
  html body.institutional-page #palabra-del-dia .cda-daily-header{justify-content:center;text-align:center}
 }
 @media(max-width:359px){html body.institutional-page #somos .purpose-age-grid{grid-template-columns:minmax(0,1fr)!important}}
 /* Annual program: usable month/year controls even inside a narrow column. */
 html body:has(.encounter-calendar) .hero{align-items:center}
 html body .hero .hero-panel{min-width:0}
 html body .hero .encounter-calendar .ec-controls{grid-template-columns:44px minmax(0,1fr) minmax(100px,.75fr) 44px!important;gap:8px!important}
 html body .hero .encounter-calendar .ec-controls .cda-palette-value{overflow:hidden!important;text-overflow:ellipsis!important}
 html body .hero .encounter-calendar .ec-grid{grid-auto-rows:minmax(44px,auto)!important}
 @media(max-width:1023px){
  html body:has(.encounter-calendar) .hero{grid-template-columns:minmax(0,1fr)!important}
  html body:has(.encounter-calendar) .hero-copy{padding:32px clamp(16px,4vw,32px) 8px!important}
  html body:has(.encounter-calendar) .hero-panel{padding:20px clamp(16px,4vw,32px) 32px!important}
  html body .hero .hero-panel .encounter-calendar{max-width:680px!important;margin-inline:auto!important}
 }
 @media(max-width:479px){
  html body .hero .encounter-calendar .ec-controls{grid-template-columns:44px minmax(0,1fr) 44px!important}
  html body .hero .encounter-calendar .ec-controls #ec-prev{grid-column:1;grid-row:1}
  html body .hero .encounter-calendar .ec-controls #ec-next{grid-column:3;grid-row:1}
  html body .hero .encounter-calendar .ec-controls>:is(select,.cda-palette-trigger){grid-column:2!important}
  html body .hero .encounter-calendar .ec-controls #ec-month,html body .hero .encounter-calendar .ec-controls .cda-palette-trigger[aria-label="Mes del calendario"]{grid-row:1}
  html body .hero .encounter-calendar .ec-controls #ec-year,html body .hero .encounter-calendar .ec-controls .cda-palette-trigger[aria-label="Año del calendario"]{grid-row:2}
 }
 /* Activity calendar and editor keep all actions reachable on short screens. */
 html body:has(#home-calendar) #home-calendar{max-width:100%}
 body:has(.workspace) .workspace>.panel{min-width:0}
 body:has(.workspace) .legend{flex-wrap:wrap;gap:10px 18px}
 body:has(.workspace) .toolbar{flex-wrap:wrap;gap:12px}
 body:has(.workspace) .toolbar .nav{flex-wrap:wrap}
 @media(max-width:1023px){body:has(.workspace) .workspace{grid-template-columns:minmax(0,1fr)!important}}
 @media(max-height:600px){
  html body.institutional-page .site-header .header-inner{min-height:64px!important}
  html body.institutional-page .cda-essential .cda-account-nav{max-height:calc(100dvh - 90px)!important}
  #editor{max-height:calc(100dvh - 20px)!important}
  #editor #form{max-height:calc(100dvh - 20px)!important}
 }
 @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.hero-slide{transition:none!important}}
}