/* AIO Mytilinis - Play Abroad Program
   Loaded automatically by the plugin. Scoped to .aio-pa. */

.aio-pa{width:100%}
.aio-pa img{max-width:100%;height:auto}

/* Full-bleed breakout: escapes the theme's / Elementor's content wrapper so the
   hero and dark sections run edge to edge. Harmless if the wrapper is already
   full width. Toggle it off in Settings > AIO Play Abroad if not needed. */
.aio-pa.aio-pa-fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body:has(.aio-pa-fullbleed){overflow-x:hidden}
/* Elementor wrappers around the shortcode widget */
.elementor-widget-shortcode:has(.aio-pa-fullbleed),
.elementor-widget-shortcode:has(.aio-pa-fullbleed) .elementor-shortcode{width:100%}

:root{--black:#000000;
  --white:#ffffff;
  --dark-blue:#01294c;
  --light-blue:#91cff6;
  --gold:#b88934;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.aio-pa *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.aio-pa{font-family:var(--font);background:var(--white);color:var(--dark-blue);line-height:1.65;font-size:16px;overflow-x:hidden}
.aio-pa img{max-width:100%;display:block}
.aio-pa a{color:inherit;text-decoration:none}
.aio-pa .wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.aio-pa .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.aio-pa h1,.aio-pa h2,.aio-pa h3{font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--dark-blue)}
.aio-pa .btn{background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 34px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .25s ease;font-family:var(--font)}
.aio-pa .btn-blue{background:var(--dark-blue);color:var(--white)}
.aio-pa .btn-blue:hover{background:var(--black)}
.aio-pa .btn-gold{background:var(--gold);color:var(--white)}
.aio-pa .btn-gold:hover{background:var(--dark-blue)}
.aio-pa .btn-white{background:var(--white);color:var(--dark-blue)}
.aio-pa .btn-white:hover{background:var(--light-blue)}
.aio-pa .btn-line{border-color:rgba(255,255,255,.55);color:var(--white)}
.aio-pa .btn-line:hover{background:var(--white);color:var(--dark-blue)}
.aio-pa .hero{min-height:100vh;position:relative;display:flex;align-items:flex-end}
.aio-pa .hero-bg{position:absolute;inset:0;background:var(--aio-hero) center/cover no-repeat}
.aio-pa .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,41,76,.5) 0%,rgba(1,41,76,.2) 45%,rgba(1,41,76,.9) 100%)}
.aio-pa .hero-content{position:relative;z-index:2;width:100%;padding:170px 0 90px}
.aio-pa .hero .eyebrow{color:var(--light-blue)}
.aio-pa .hero h1{color:var(--white);font-size:clamp(40px,6.5vw,84px);max-width:14ch;margin:20px 0 24px}
.aio-pa .hero p{color:var(--white);max-width:58ch;font-size:17px;margin-bottom:38px;opacity:.95}
.aio-pa .hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.aio-pa .hero-strip{position:relative;z-index:2;background:var(--dark-blue);overflow:hidden;white-space:nowrap}
.aio-pa .strip-track{display:inline-flex;gap:70px;padding:15px 0;animation:tick 34s linear infinite;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--light-blue);font-weight:700}
.aio-pa .strip-track b{color:var(--white)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.aio-pa section{padding:110px 0}
.aio-pa .sec-head{margin-bottom:56px}
.aio-pa .sec-head h2{font-size:clamp(30px,4.2vw,54px);margin-top:16px;max-width:20ch}
.aio-pa .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.aio-pa .about-copy h2{font-size:clamp(30px,4.2vw,50px);margin:16px 0 10px}
.aio-pa .about-lead{font-size:clamp(19px,2.4vw,26px);font-weight:700;color:var(--gold);margin-bottom:24px}
.aio-pa .about-copy p{margin-bottom:18px;max-width:56ch;color:#2b4a68}
.aio-pa .about-media{display:grid;gap:16px}
.aio-pa .about-media .main{aspect-ratio:4/5;overflow:hidden}
.aio-pa .about-media .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aio-pa .about-media .row div{aspect-ratio:1/1;overflow:hidden}
.aio-pa .about-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.aio-pa .about-media div:hover img{transform:scale(1.04)}
@media(max-width:900px){
.aio-pa .about-grid{grid-template-columns:1fr;gap:44px}
.aio-pa .about-media .main{aspect-ratio:4/3}
}
.aio-pa .programs{background:var(--dark-blue)}
.aio-pa .programs .sec-head h2{color:var(--white)}
.aio-pa .programs .sec-head .eyebrow{color:var(--light-blue)}
.aio-pa .prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.aio-pa .prog-card{background:var(--white);border:none;cursor:pointer;transition:box-shadow .25s,transform .25s;overflow:hidden}
.aio-pa .prog-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(1,41,76,.14)}
.aio-pa .prog-card .img{aspect-ratio:16/10;overflow:hidden;position:relative}
.aio-pa .prog-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.aio-pa .prog-card:hover .img img{transform:scale(1.05)}
.aio-pa .play-hint{position:absolute;top:16px;right:16px;background:rgba(1,41,76,.85);color:var(--white);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:8px 14px;display:flex;align-items:center;gap:8px}
.aio-pa .prog-body{padding:34px}
.aio-pa .prog-body .tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700}
.aio-pa .prog-body h3{font-size:25px;margin:10px 0 8px}
.aio-pa .prog-body p{color:#2b4a68;font-size:15px;margin-bottom:22px}
.aio-pa .prog-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(1,41,76,.1);padding-top:20px;gap:12px;flex-wrap:wrap}
.aio-pa .prog-meta .price{font-size:22px;font-weight:700}
.aio-pa .prog-meta .price small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6a86a0;font-weight:600}
.aio-pa .prog-meta .open{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold)}
@media(max-width:820px){
.aio-pa .prog-grid{grid-template-columns:1fr}
}
.aio-pa .modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.aio-pa .modal.active{display:flex}
.aio-pa .modal-backdrop{position:absolute;inset:0;background:rgba(1,41,76,.78)}
.aio-pa .modal-box{position:relative;background:var(--white);max-width:940px;width:100%;max-height:90vh;overflow-y:auto;padding:44px;display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.aio-pa .modal-box .close{position:absolute;top:16px;right:16px;background:var(--white);border:1px solid rgba(1,41,76,.2);color:var(--dark-blue);width:38px;height:38px;cursor:pointer;font-size:15px;z-index:2}
.aio-pa .modal-box .close:hover{background:var(--dark-blue);color:var(--white)}
.aio-pa .modal-video{aspect-ratio:9/16;background:var(--black);overflow:hidden}
.aio-pa .modal-video video{width:100%;height:100%;object-fit:cover}
.aio-pa .modal-box h3{font-size:27px;margin:12px 0 4px}
.aio-pa .modal-box .price-line{font-size:20px;font-weight:700;color:var(--gold);margin-bottom:22px}
.aio-pa .modal-box h4{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#6a86a0;margin-bottom:16px}
.aio-pa .inc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:30px}
.aio-pa .inc-list li{display:flex;gap:11px;align-items:center;font-size:14px}
.aio-pa .inc-list li svg{flex-shrink:0}
@media(max-width:820px){
.aio-pa .modal-box{grid-template-columns:1fr;padding:34px 22px;gap:26px}
.aio-pa .modal-video{max-width:280px;margin:0 auto}
.aio-pa .inc-list{grid-template-columns:1fr}
}
.aio-pa .lightbox{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:20px}
.aio-pa .lightbox.active{display:flex}
.aio-pa .lightbox .modal-backdrop{background:rgba(0,0,0,.85)}
.aio-pa .lightbox-inner{position:relative;height:min(84vh,760px);aspect-ratio:9/16;max-width:94vw}
.aio-pa .lightbox-inner video{width:100%;height:100%;object-fit:contain;background:var(--black)}
.aio-pa .lightbox-inner .close{position:absolute;top:-16px;right:-16px;background:var(--white);border:none;color:var(--dark-blue);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.aio-pa .facilities{padding-bottom:0}
.aio-pa .fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aio-pa .fac-grid .item{aspect-ratio:3/4;overflow:hidden;position:relative}
.aio-pa .fac-grid .item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.aio-pa .fac-grid .item:hover img{transform:scale(1.05)}
.aio-pa .fac-grid .item span{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--white);background:linear-gradient(180deg,transparent,rgba(1,41,76,.85))}
@media(max-width:820px){
.aio-pa .fac-grid{grid-template-columns:repeat(2,1fr)}
}
.aio-pa .fac-strip{margin-top:90px;background:var(--dark-blue);padding:64px 0}
.aio-pa .fac-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.aio-pa .fac-strip h3{color:var(--white);font-size:clamp(21px,2.8vw,34px);max-width:24ch}
.aio-pa .lesvos-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.aio-pa .lesvos-copy h2{font-size:clamp(30px,4.2vw,50px);margin:16px 0 22px}
.aio-pa .lesvos-copy>p{color:#2b4a68;max-width:54ch;margin-bottom:30px}
.aio-pa .lesvos-points{border-top:1px solid rgba(1,41,76,.12)}
.aio-pa .lesvos-point{padding:20px 0;border-bottom:1px solid rgba(1,41,76,.12)}
.aio-pa .lesvos-point h4{font-size:16px;font-weight:700;margin-bottom:5px}
.aio-pa .lesvos-point h4 span{color:var(--gold);margin-right:10px}
.aio-pa .lesvos-point p{font-size:14px;color:#4f6c86}
.aio-pa .slider{position:relative}
.aio-pa .slider-frame{aspect-ratio:4/3;position:relative;overflow:hidden}
.aio-pa .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.aio-pa .slide.active{opacity:1}
.aio-pa .slide img{width:100%;height:100%;object-fit:cover}
.aio-pa .slide figcaption{position:absolute;left:0;bottom:0;background:var(--dark-blue);color:var(--white);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;padding:12px 20px}
.aio-pa .slider-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.aio-pa .slider-dots{display:flex;gap:8px}
.aio-pa .slider-dots button{width:32px;height:3px;background:rgba(1,41,76,.15);border:none;cursor:pointer;transition:background .2s}
.aio-pa .slider-dots button.active{background:var(--gold)}
.aio-pa .slider-arrows button{background:none;border:1px solid rgba(1,41,76,.2);color:var(--dark-blue);width:44px;height:44px;cursor:pointer;font-size:15px;margin-left:10px}
.aio-pa .slider-arrows button:hover{background:var(--dark-blue);color:var(--white);border-color:var(--dark-blue)}
@media(max-width:900px){
.aio-pa .lesvos-grid{grid-template-columns:1fr;gap:44px}
}
.aio-pa .register{background:#f5f9fd;border-top:3px solid var(--gold)}
.aio-pa .reg-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.aio-pa .reg-intro h2{font-size:clamp(30px,4.2vw,50px);margin:16px 0 18px}
.aio-pa .reg-intro p{color:#2b4a68;max-width:44ch}
.aio-pa .reg-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.aio-pa .field{display:flex;flex-direction:column;gap:7px}
.aio-pa .field.full{grid-column:1/-1}
.aio-pa .field label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#4f6c86;font-weight:700}
.aio-pa .field input,.aio-pa .field select,.aio-pa .field textarea{background:var(--white);border:1px solid rgba(1,41,76,.18);color:var(--dark-blue);padding:14px 15px;font-family:var(--font);font-size:15px;transition:border-color .2s;width:100%}
.aio-pa .field input:focus,.aio-pa .field select:focus,.aio-pa .field textarea:focus{outline:none;border-color:var(--gold)}
.aio-pa .checks{grid-column:1/-1;display:grid;gap:13px;margin-top:4px}
.aio-pa .checks label{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#4f6c86;cursor:pointer}
.aio-pa .checks input{margin-top:3px;accent-color:var(--gold)}
@media(max-width:900px){
.aio-pa .reg-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:560px){
.aio-pa .reg-form{grid-template-columns:1fr}
}
.aio-pa .wa-float{position:fixed;bottom:26px;right:26px;z-index:150;width:56px;height:56px;border-radius:50%;background:var(--dark-blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(1,41,76,.35);transition:transform .2s}
.aio-pa .wa-float:hover{transform:scale(1.08);background:var(--black)}
.aio-pa .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.aio-pa .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.aio-pa .reveal{opacity:1;transform:none;transition:none}
.aio-pa .strip-track{animation:none}
}
@media(max-width:560px){
.aio-pa section{padding:80px 0}
.aio-pa .wrap{padding:0 20px}
.aio-pa .hero-content{padding:150px 0 70px}
}


/* ===== Contact Form 7 styling (registration section) ===== */
.aio-pa .reg-form-wrap .wpcf7 form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.aio-pa .reg-form-wrap .field{display:flex;flex-direction:column;gap:7px}
.aio-pa .reg-form-wrap .field.full{grid-column:1/-1}
.aio-pa .reg-form-wrap label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#4f6c86;font-weight:700}
.aio-pa .reg-form-wrap .wpcf7-form-control-wrap{display:block;width:100%}
.aio-pa .reg-form-wrap input[type=text],
.aio-pa .reg-form-wrap input[type=email],
.aio-pa .reg-form-wrap input[type=tel],
.aio-pa .reg-form-wrap input[type=date],
.aio-pa .reg-form-wrap select,
.aio-pa .reg-form-wrap textarea{background:var(--white);border:1px solid rgba(1,41,76,.18);color:var(--dark-blue);padding:14px 15px;font-family:var(--font);font-size:15px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.aio-pa .reg-form-wrap select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234f6c86'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.aio-pa .reg-form-wrap input:focus,.aio-pa .reg-form-wrap select:focus,.aio-pa .reg-form-wrap textarea:focus{outline:none;border-color:var(--gold)}
.aio-pa .reg-form-wrap .checks{grid-column:1/-1;display:grid;gap:13px;margin-top:4px}
.aio-pa .reg-form-wrap .wpcf7-acceptance .wpcf7-list-item{margin:0}
.aio-pa .reg-form-wrap .wpcf7-acceptance label{display:flex;gap:11px;align-items:flex-start;font-size:13px;letter-spacing:0;text-transform:none;color:#4f6c86;font-weight:400;cursor:pointer;line-height:1.55}
.aio-pa .reg-form-wrap input[type=checkbox]{margin-top:3px;accent-color:var(--gold);width:auto}
.aio-pa .reg-form-wrap .submit-row{grid-column:1/-1}
.aio-pa .reg-form-wrap input[type=submit]{background:var(--gold);color:var(--white);border:none;padding:16px 34px;font-family:var(--font);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .25s;border-radius:0}
.aio-pa .reg-form-wrap input[type=submit]:hover{background:var(--dark-blue)}
.aio-pa .reg-form-wrap .wpcf7-spinner{display:block;margin:12px 0 0}
.aio-pa .reg-form-wrap .wpcf7-not-valid-tip{color:#b88934;font-size:12px;margin-top:5px}
.aio-pa .reg-form-wrap .wpcf7-response-output{grid-column:1/-1;margin:18px 0 0;border:1px solid rgba(1,41,76,.2);padding:14px 16px;font-size:14px}
@media(max-width:560px){.aio-pa .reg-form-wrap .wpcf7 form{grid-template-columns:1fr}}

/* =========================================================================
   v1.1.0 - form layout + mobile refinements
   ========================================================================= */

/* --- Registration form: tidy two-column grid, aligned rows --- */
.aio-pa .reg-form-wrap .wpcf7 form{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.aio-pa .reg-form-wrap .field{min-width:0}
.aio-pa .reg-form-wrap textarea{min-height:132px;max-height:220px;resize:vertical}
.aio-pa .reg-form-wrap .checks{margin-top:8px}
.aio-pa .reg-form-wrap .submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.aio-pa .reg-form-wrap input[type=submit]{width:auto;min-width:230px}
/* CF7 injects <p> and <br> wrappers that break the grid */
.aio-pa .reg-form-wrap .wpcf7 form > p,
.aio-pa .reg-form-wrap .wpcf7 form > br{display:none}
.aio-pa .reg-form-wrap .wpcf7 form p:empty{display:none}
/* Hide the Akismet privacy notice and CF7's data-processing line */
.aio-pa .reg-form-wrap .akismet-privacy-notice,
.aio-pa .reg-form-wrap .wpcf7 .akismet_comment_form_privacy_notice,
.aio-pa .reg-form-wrap a[href*="automattic.com/privacy"],
.aio-pa .reg-form-wrap .wpcf7-list-item-label:empty{display:none}
.aio-pa .reg-form-wrap .wpcf7-spinner{margin:0}

/* --- Mobile refinements --- */
@media(max-width:900px){
  /* form goes single column earlier, two columns is cramped on tablets */
  .aio-pa .reg-form-wrap .wpcf7 form{grid-template-columns:1fr;gap:18px}
  .aio-pa .reg-form-wrap input[type=submit]{width:100%;min-width:0}
}
@media(max-width:768px){
  /* real viewport height, avoids the hero jumping when mobile browser bars hide */
  .aio-pa .hero{min-height:88svh}
  .aio-pa .hero-content{padding:130px 0 64px}
  .aio-pa .hero h1{font-size:clamp(34px,9vw,52px);max-width:100%}
  .aio-pa .hero p{font-size:16px;margin-bottom:30px}
  .aio-pa .hero-ctas{gap:12px}
  .aio-pa .hero-ctas .btn{width:100%}
  .aio-pa .strip-track{padding:13px 0;gap:44px;font-size:10px}

  /* comfortable tap targets everywhere */
  .aio-pa .btn{padding:17px 26px;min-height:52px}
  .aio-pa .slider-arrows button{width:48px;height:48px}
  .aio-pa .slider-dots button{height:4px;width:36px}

  /* sections breathe less, page is long on a phone */
  .aio-pa section{padding:72px 0}
  .aio-pa .sec-head{margin-bottom:38px}
  .aio-pa .fac-strip{margin-top:64px;padding:48px 0}
  .aio-pa .fac-strip .wrap{gap:26px}
  .aio-pa .fac-strip .btn{width:100%}

  /* facilities: keep 2 up but shorter tiles */
  .aio-pa .fac-grid{gap:10px}
  .aio-pa .fac-grid .item{aspect-ratio:4/5}
  .aio-pa .fac-grid .item span{padding:28px 12px 12px;font-size:9px;letter-spacing:.18em}

  /* program cards */
  .aio-pa .prog-body{padding:26px}
  .aio-pa .prog-meta{gap:10px}

  /* Lesvos slider */
  .aio-pa .slider-frame{aspect-ratio:3/2}

  /* WhatsApp button clear of iOS home indicator */
  .aio-pa .wa-float{bottom:calc(18px + env(safe-area-inset-bottom));right:18px;width:54px;height:54px}
}
@media(max-width:768px){
  /* popups: video sits on top, content scrolls under it */
  .aio-pa .modal{padding:0;align-items:flex-end}
  .aio-pa .modal-box{max-height:92vh;max-height:92svh;padding:0 20px 28px;gap:0;border-radius:0}
  .aio-pa .modal-video{max-width:100%;aspect-ratio:16/11;margin:0 -20px 22px;position:sticky;top:0}
  .aio-pa .modal-video video{object-fit:cover}
  .aio-pa .modal-box .close{top:12px;right:12px;background:rgba(255,255,255,.92);border:none}
  .aio-pa .modal-box h3{font-size:23px}
  .aio-pa .modal-box .btn{width:100%}
  .aio-pa .inc-list{gap:10px}

  /* fullscreen video lightbox */
  .aio-pa .lightbox{padding:0}
  .aio-pa .lightbox-inner{height:100svh;width:100vw;aspect-ratio:auto;max-width:100vw}
  .aio-pa .lightbox-inner .close{top:calc(14px + env(safe-area-inset-top));right:14px}
}
@media(max-width:480px){
  .aio-pa .wrap{padding:0 18px}
  .aio-pa .about-lead{font-size:19px}
  .aio-pa .lesvos-point h4{font-size:15px}
  .aio-pa .prog-meta .price{font-size:20px}
}
/* stop iOS zooming in when a field is focused (needs 16px minimum) */
@media(max-width:768px){
  .aio-pa .reg-form-wrap input,
  .aio-pa .reg-form-wrap select,
  .aio-pa .reg-form-wrap textarea{font-size:16px}
}

/* =========================================================================
   v1.1.1 - placeholder contrast + theme page title banner
   ========================================================================= */

/* Placeholders should read as hints, not as filled-in values */
.aio-pa .reg-form-wrap input::placeholder,
.aio-pa .reg-form-wrap textarea::placeholder{color:#93a7bd;opacity:1}
.aio-pa .reg-form-wrap input::-webkit-input-placeholder,
.aio-pa .reg-form-wrap textarea::-webkit-input-placeholder{color:#93a7bd}
.aio-pa .reg-form-wrap input:-ms-input-placeholder,
.aio-pa .reg-form-wrap textarea:-ms-input-placeholder{color:#93a7bd}
/* Unselected dropdowns match the placeholder tone, chosen values go dark */
.aio-pa .reg-form-wrap select:invalid,
.aio-pa .reg-form-wrap select option[value=""]{color:#93a7bd}
.aio-pa .reg-form-wrap select:valid{color:var(--dark-blue)}
/* Empty date fields show dd/mm/yyyy, keep that light too */
.aio-pa .reg-form-wrap input[type=date]:not(:focus):in-range::-webkit-datetime-edit-year-field,
.aio-pa .reg-form-wrap input[type=date]:not(:focus):in-range::-webkit-datetime-edit-month-field,
.aio-pa .reg-form-wrap input[type=date]:not(:focus):in-range::-webkit-datetime-edit-day-field,
.aio-pa .reg-form-wrap input[type=date]:not(:focus):in-range::-webkit-datetime-edit-text{color:#93a7bd}

/* Hide the theme's page title banner on the Play Abroad page only.
   Toggle in Settings > AIO Play Abroad. */
body.aio-pa-page .qodef-page-title,
body.aio-pa-page .qodef-m-title,
body.aio-pa-page .qodef-breadcrumbs{display:none}
body.aio-pa-page #qodef-page-outer{padding-top:0}
body.aio-pa-page #qodef-page-inner{padding-top:0;padding-bottom:0}

/* =========================================================================
   v1.1.2 - image fill hardening, popup video, card framing
   ========================================================================= */

/* Themes commonly ship img{height:auto} which stops object-fit images from
   filling their frame, leaving a gap under the photo. Pin them instead. */
.aio-pa .fac-grid .item,
.aio-pa .about-media .main,
.aio-pa .about-media .row div,
.aio-pa .prog-card .img{position:relative;overflow:hidden}
/* slides must stay absolutely stacked inside the frame */
.aio-pa .slider-frame{position:relative;overflow:hidden}
.aio-pa .slide{position:absolute;inset:0;overflow:hidden}
.aio-pa .fac-grid .item img,
.aio-pa .about-media img,
.aio-pa .prog-card .img img,
.aio-pa .slide img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}

/* Keep the subject of the two programme photos in frame when cropped wide */
.aio-pa .prog-card[data-modal="modal-women"] .img img{object-position:62% 42%}
.aio-pa .prog-card[data-modal="modal-men"] .img img{object-position:center 38%}

/* --- Programme pop-up on mobile: keep the video vertical --- */
@media(max-width:768px){
  .aio-pa .modal{padding:0;align-items:flex-end}
  .aio-pa .modal-box{max-height:92svh;padding:22px 20px 28px;gap:20px;display:block;overflow-y:auto}
  .aio-pa .modal-video{position:relative;top:auto;margin:0 auto 22px;width:min(62vw,240px);max-width:100%;aspect-ratio:9/16;max-height:46svh;background:var(--black)}
  .aio-pa .modal-video video{width:100%;height:100%;object-fit:contain;background:var(--black)}
  .aio-pa .modal-box .close{position:sticky;float:right;top:0;margin:-6px -6px 0 0;background:var(--white);border:1px solid rgba(1,41,76,.15);z-index:3}
  .aio-pa .modal-box h3{font-size:23px}
  .aio-pa .modal-box .btn{width:100%}
  .aio-pa .inc-list{grid-template-columns:1fr;gap:10px}
}

/* --- Facilities tiles on mobile --- */
@media(max-width:768px){
  .aio-pa .fac-grid{grid-template-columns:1fr 1fr;gap:10px}
  .aio-pa .fac-grid .item{aspect-ratio:3/4}
  .aio-pa .fac-grid .item span{padding:30px 12px 12px;font-size:9px;letter-spacing:.16em;line-height:1.3}
}
@media(max-width:480px){
  .aio-pa .fac-grid .item{aspect-ratio:1/1}
}


/* =========================================================================
   v1.2.0 - accessibility, performance
   ========================================================================= */

/* Dialogs are hidden from assistive tech until opened */
.aio-pa .modal[hidden],.aio-pa .lightbox[hidden]{display:none}
.aio-pa .modal.active,.aio-pa .lightbox.active{display:flex}

/* Keyboard focus is visible on every interactive element */
.aio-pa a:focus-visible,.aio-pa button:focus-visible,.aio-pa [role="button"]:focus-visible,
.aio-pa input:focus-visible,.aio-pa select:focus-visible,.aio-pa textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.aio-pa .prog-card[role="button"]{cursor:pointer}

/* Skip animation entirely for people who ask for reduced motion */
@media(prefers-reduced-motion:reduce){
  .aio-pa .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .aio-pa .strip-track{animation:none}
  .aio-pa .slide{transition:none}
  .aio-pa *{scroll-behavior:auto!important}
}

/* Text stays legible if a photo fails to load */
.aio-pa .hero-bg{background-color:var(--dark-blue)}


/* =========================================================================
   v1.2.1 - slider repair
   ========================================================================= */
.aio-pa .slider-frame{position:relative}
.aio-pa .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.aio-pa .slide.active{opacity:1}
.aio-pa .slide img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.aio-pa .slide figcaption{z-index:2}
@media(prefers-reduced-motion:reduce){.aio-pa .slide{transition:none}}


/* =========================================================================
   v1.3.0 - readability on large screens
   ========================================================================= */

/* Body copy was 15-16px inside a 1240px column, which reads small on a laptop
   or a wide monitor. Bumped, with darker ink for contrast. */
.aio-pa{font-size:17px}
.aio-pa .wrap{max-width:1320px}

.aio-pa .about-copy p,
.aio-pa .lesvos-copy > p,
.aio-pa .reg-intro p{font-size:17px;line-height:1.7;color:#123a63;max-width:60ch}
.aio-pa .prog-body p{font-size:16px;line-height:1.65;color:#123a63}
.aio-pa .lesvos-point p{font-size:15px;line-height:1.6;color:#35536f}
.aio-pa .lesvos-point h4{font-size:17px}
.aio-pa .lesvos-point h4 span{font-size:13px}
.aio-pa .inc-list li{font-size:15px}
.aio-pa .reg-form-wrap label{font-size:11px;letter-spacing:.2em}
.aio-pa .prog-meta .price small{font-size:11px;color:#4f6c86}
.aio-pa .prog-body .tag,
.aio-pa .eyebrow{font-size:12px}
.aio-pa .fac-grid .item span{font-size:11px}
.aio-pa .strip-track{font-size:12px}
.aio-pa .hero p{font-size:18px;line-height:1.65}
.aio-pa .about-lead{font-size:clamp(21px,2.5vw,28px)}
.aio-pa .btn{font-size:13px}
.aio-pa .modal-box h4{font-size:12px}

/* Wide monitors: scale the whole page up a notch rather than leaving a thin
   column of small text in the middle. */
@media(min-width:1600px){
  .aio-pa{font-size:18px}
  .aio-pa .wrap{max-width:1460px}
  .aio-pa .about-copy p,
  .aio-pa .lesvos-copy > p,
  .aio-pa .reg-intro p{font-size:18px}
  .aio-pa .hero p{font-size:19px}
  .aio-pa .prog-body p{font-size:17px}
  .aio-pa .lesvos-point p{font-size:16px}
  .aio-pa .inc-list li{font-size:16px}
  .aio-pa section{padding:130px 0}
}

/* Small screens keep the previous, comfortable sizes */
@media(max-width:768px){
  .aio-pa{font-size:16px}
  .aio-pa .about-copy p,
  .aio-pa .lesvos-copy > p,
  .aio-pa .reg-intro p{font-size:16px}
  .aio-pa .hero p{font-size:16px}
}


/* =========================================================================
   v1.3.0b - QA fixes found in browser testing
   ========================================================================= */

/* Slider dots were a 4px tall tap target. Real 44px button, thin visual bar. */
.aio-pa .slider-dots{gap:0;align-items:center}
.aio-pa .slider-dots button{position:relative;height:44px;width:44px;padding:0;margin:0;background:none;border:0;display:flex;align-items:center;justify-content:center}
.aio-pa .slider-dots button::before{content:"";display:block;width:32px;height:3px;background:rgba(1,41,76,.15);transition:background .2s}
.aio-pa .slider-dots button.active::before{background:var(--gold)}
.aio-pa .slider-dots button.active{background:none}

/* Pop-up close button: pin it to the corner of the panel instead of floating */
@media(max-width:768px){
  .aio-pa .modal-box{position:relative;padding-top:56px}
  .aio-pa .modal-box .close{position:absolute;float:none;top:12px;right:12px;margin:0;width:42px;height:42px}
  .aio-pa .modal-video{margin-top:0}
}
/* Focus is moved into the dialog on open, so do not paint a ring on that first
   programmatic focus. Keyboard users still get one when they Tab. */
.aio-pa .modal-box:focus,.aio-pa .lightbox-inner:focus{outline:none}

/* Form labels were 11px uppercase, on the small side for a long form */
.aio-pa .reg-form-wrap label{font-size:12px;letter-spacing:.16em}
.aio-pa .reg-form-wrap .wpcf7-acceptance label{font-size:14px;letter-spacing:0;line-height:1.6}
.aio-pa .reg-form-wrap .checks label{font-size:14px;letter-spacing:0}
