/* Camara Academy / official-site media edition V6.
   Source media from www.camaraacademy.com, inventoried in assets/media/official-site.
   Brand colours remain calm. Before public deployment verify photo/video permissions,
   including consent for minors photographed in training. */
:root{--academy-original-bg:#173527}
.hero:before{background:linear-gradient(145deg,#789682,#173b29)}
.hero:after{
  background:linear-gradient(0deg,#17372888,transparent 58%),
    url('../media/official-site/original-09-wp-block-cover-image-background-wp-i-3058d00c.webp')
    center 42%/cover no-repeat;
  filter:saturate(.88) contrast(.98)
}
.hero-bottom:after{background:#f2f0e8;color:#254535}
.photo.photo-training{
  background-color:#315741;
  background-image:linear-gradient(0deg,#0d3020a6,transparent 70%),
    url('../media/official-site/original-08-wp-image-220-perfezionamento-tecnico-0b17f204.webp');
  background-size:cover;background-position:center 54%
}
html[data-ca-page="home"] .photo.photo-football,
html[data-ca-page="metodo"] .photo.photo-football{
  background-color:#264935;
  background-image:linear-gradient(0deg,#102b1c91,transparent 72%),
    url('../media/official-site/original-12-wp-image-195-inizia-subito-il-tuo-pe-8995c83a.webp');
  background-size:cover;background-position:center 51%
}
.photo.photo-stadium{
  background-color:#234332;
  background-image:linear-gradient(0deg,#102b1ca1,transparent 72%),
    url('../media/official-site/original-19-wp-image-203-la-mentalit-non-riguard-c0d56ad6.webp');
  background-size:cover;background-position:center
}
.photo.photo-player{
  background-color:#244733;
  background-image:linear-gradient(0deg,#102b1cb8,transparent 72%),
    url('../media/official-site/original-15-wp-image-207-perfezionamento-tecnico-4ec10a70.webp');
  background-size:cover;background-position:center 45%
}
/* Each page is illustrated by media present on the actual academy website. */
html[data-ca-page="metodo"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e87,transparent 70%),
    url('../media/official-site/original-08-wp-image-220-perfezionamento-tecnico-0b17f204.webp')
    center 48%/cover no-repeat;
  opacity:.96;filter:saturate(.78)
}
html[data-ca-page="programmi"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e8e,transparent 70%),
    url('../media/official-site/original-12-wp-image-195-inizia-subito-il-tuo-pe-8995c83a.webp')
    center 53%/cover no-repeat;
  opacity:.96;filter:saturate(.80)
}
html[data-ca-page="coach"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e71,transparent 70%),
    url('../media/official-site/original-03-wp-image-56-master-ball-af58d531.webp')
    center 40%/cover no-repeat;
  opacity:1;filter:saturate(.79)
}
html[data-ca-page="risultati"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e80,transparent 74%),
    url('../media/official-site/original-19-wp-image-203-la-mentalit-non-riguard-c0d56ad6.webp')
    center/cover no-repeat;
  opacity:1;filter:saturate(.83)
}
html[data-ca-page="video"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e83,transparent 72%),
    url('../media/official-site/original-08-wp-image-220-perfezionamento-tecnico-0b17f204.webp')
    center 45%/cover no-repeat;
  opacity:1;filter:saturate(.82)
}
html[data-ca-page="prezzi"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e91,transparent 73%),
    url('../media/official-site/original-02-wp-image-58-location-59b813c3.webp')
    center 48%/cover no-repeat;
  opacity:1;filter:saturate(.83)
}
html[data-ca-page="contatti"] .page-hero:after{
  background:linear-gradient(0deg,#112b1e8a,transparent 70%),
    url('../media/official-site/original-09-wp-block-cover-image-background-wp-i-3058d00c.webp')
    center 42%/cover no-repeat;
  opacity:1;filter:saturate(.81)
}
/* Replace the DC illustration by an actual image from the original site. */
.portrait-placeholder.portrait-official{
  display:block;position:relative;min-height:520px;background:#294c38;
  isolation:isolate;border-radius:5px
}
.portrait-official>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 26%;
  filter:saturate(.85);z-index:0
}
.portrait-official:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#0e271ddc,transparent 39%)
}
.portrait-official .portrait-caption{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:24px 26px;background:transparent;color:#fff
}
.portrait-official .portrait-caption small{color:#e2e9d8;font-size:11px}
.portrait-official .portrait-caption b{
  font-size:clamp(24px,3.4vw,41px);line-height:1.04;letter-spacing:-.045em;
  max-width:100%;overflow-wrap:break-word
}
/* Remote official MP4 files remain hosted by the original site. */
.video-card .video-thumb{background-color:#1f3e2e;background-size:cover;background-position:center}
.video-card .play{background:#2b6143;color:#fff;border:2px solid #e8f0e4aa}
.video-card .play:hover{background:#19452d}
.modal.open{z-index:320}
.official-video-wrap{display:flex;flex-direction:column;gap:12px}
.official-video-wrap video{
  display:block;width:100%;max-height:min(62vh,560px);aspect-ratio:16/9;
  object-fit:contain;background:#122d20;border-radius:5px
}
.official-video-wrap p{margin:0;font-size:13px;color:#526659}
.official-video-wrap a{font-size:13px;font-weight:800;color:#2c6242;text-decoration:underline;text-underline-offset:3px}
@media(max-width:750px){
  .hero:after{background-position:center 40%}
  .portrait-placeholder.portrait-official{min-height:450px}
  .portrait-official>img{object-position:center 22%}
  .modal-content{padding:50px 16px 20px}
  .official-video-wrap video{max-height:50vh}
}
@media(max-width:460px){
  .portrait-placeholder.portrait-official{min-height:395px}
  .portrait-official .portrait-caption{padding:22px 17px}
}
@media(prefers-reduced-motion:reduce){
  .video-card .play{transition:none}
}

/* Fix legacy V1 flex layout: it put the hero strip beside the hero content,
   covering the official photo and creating a tall narrow green box. */
.hero{display:block}
.hero>.container{width:min(var(--max),calc(100% - 92px));margin-inline:auto}
.hero-bottom{position:relative;inset:auto;left:auto;right:auto;bottom:auto;width:100%;display:block;clear:both}
.hero-bottom .container{width:min(var(--max),calc(100% - 92px));padding:14px 0;min-height:54px;display:flex;align-items:center}
.hero-bottom p{padding:0;margin:0}
.hero-bottom:after{display:none}
@media(max-width:1240px){.hero>.container,.hero-bottom .container{width:calc(100% - 64px)}}
@media(max-width:1020px){.hero>.container,.hero-bottom .container{width:calc(100% - 48px)}}
@media(max-width:750px){
  .hero>.container{width:100%;margin:0;padding:0}
  .hero-bottom .container{width:calc(100% - 40px);padding:13px 0}
  .hero-bottom p{font-size:10px;letter-spacing:.04em}
}
@media(max-width:460px){.hero-bottom .container{width:calc(100% - 34px)}}