/* One fluid system for every screen (owner's decision, CLAUDE.md «Ρευστό responsive»): phone, tablet, laptop, computer
   and a 55" screen, without steps for particular devices. Letters, spaces, boxes and the tops of the pages grow in
   proportion with the width, between a minimum (a phone, 390px) and a maximum (a computer, 1440px). Above 1440px the
   whole page grows as one (page-zoom.js), so every value here stops at its 1440px size: nothing grows twice and the
   content stays centred in its width. Only font, sizes and spaces: no text, colour, order or picture changes here.

   The pages of the site except the home page carry body.inner-page (site/layout.blade.php). The home page takes only
   the menu, the iPhone setting, its plan cards between a phone and a computer, and the large screens (page-zoom.js). */

/* The iPhone and iPad enlarge the text of some blocks on their own (mostly with the phone on its side), so a page looked
   as if written in another font: the text stays at the size the page gives it, as already in the app (css/app.css). */
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* The scale, from 390px to 1440px wide (a straight line between the two, then fixed). The titles and the spaces at the
   top of a page follow the smaller side of the screen (a phone held sideways is low: 390px), so a low screen is not
   filled by its title. Model: the home page (section title 32→49px) and the text inside boxes (headings 18.9px, text
   15–16px), which stay as they are. */
:root{
  --fluid-title:clamp(2.25rem,1.6rem + min(2.667vw,4.267vh),4rem);         /* page title: 36 → 64px */
  --fluid-heading:clamp(1.75rem,1.286rem + min(1.905vw,3.048vh),3rem);     /* section title: 28 → 48px */
  --fluid-lead:clamp(1rem,.93rem + .286vw,1.1875rem);         /* introduction: 16 → 19px */
  --fluid-section:clamp(48px,30.2px + 4.571vw,96px);          /* between sections: 48 → 96px */
  --fluid-head-gap:clamp(28px,22.8px + 1.333vw,42px);         /* under a section title: 28 → 42px */
  --fluid-hero-pad:clamp(32px,25.1px + min(3.81vw,6.1vh),80px);          /* inside the top of a page: 40 → 80px */
  --fluid-hero-height:max(440px,min(64vh,576px));             /* a top with a picture: 64% of the screen, 440–576px */
  --fluid-hero-overlap:0px;                                   /* a box on the lower edge of the top (wide screens) */
  --fluid-gap:clamp(16px,12px + 1vw,24px);
}
@supports(height:1svh){:root{--fluid-hero-height:max(440px,min(64svh,576px))}}
@media(min-width:921px){:root{--fluid-hero-overlap:-34px}}

/* The menu on a phone held sideways (every page, the home page too): as tall as the screen at most, scrolling inside
   itself, and on a low screen in two columns of smaller lines, so all of it fits even in 390px of height. */
.mobile-nav:not([hidden]){max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain}
@supports(height:1dvh){.mobile-nav:not([hidden]){max-height:calc(100dvh - 72px)}}
@media(max-height:500px) and (min-width:560px){
  .mobile-nav:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;padding-bottom:12px}
  .mobile-nav a{padding:9px 0;font-size:.92rem}
}

/* Boxes side by side: as many as fit (1, 2, 3, 4 a row), never two huge ones on a wide screen. */
body.inner-page :is(.metric-grid,.yde-steps__grid,.yde-official__grid,.referral-reward-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
body.inner-page .yde-official-card:last-child{grid-column:auto}
body.inner-page .article-grid:not(.article-grid--home){grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
/* The plan cards of the home page, between a phone and a computer only (its phone and its computer stay as they are). */
@media(min-width:681px) and (max-width:1279.98px){
  .catalog-section--home .plan-list.is-active{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* Letters: the titles of the page and of its sections, wherever they are (on a picture or not), never inside a box. */
body.inner-page #main h1:not(.eyebrow):not(:where(.share-card) h1){font-size:var(--fluid-title)}
body.inner-page #main h2:not(.eyebrow):not(:where(article,form,[class*=card],[class*=cta],[class*=modal],[class*=dialog],[class*=paper],[class*=preview],.evaluation-side,[class*=aside],[class*=report],[class*=notice],[class*=group],.energys-about__service) h2){font-size:var(--fluid-heading)}
/* The introduction under a title: at the top of the page (on its picture) and at the head of a section. */
body.inner-page #main :is([class*=hero],[class*=-head]):not(.legal-hero) p:not([class]):not(:where(article,form,[class*=card],[class*=report]) p),
body.inner-page #main :is(.section-head,.form-copy,.contact-main__copy,.partner-main__copy)>p{font-size:var(--fluid-lead)}

/* Spaces: one space between sections and under their titles. */
body.inner-page #main :is(.section:not(.program-facts-section):not(.program-main),.contact-main,.partner-main,.article-listing,.article-body,.legal-content,.energys-about__identity,.energys-about__system,.energys-about__services,.evaluation-embed,.content:not(.content-card)){padding-block:var(--fluid-section)}
body.inner-page #main :is(.energys-about__scope,.energys-about__credentials,.programs-section,.section.program-main){padding-bottom:var(--fluid-section)}
body.inner-page #main .contact-appointment{padding-top:0}
body.inner-page #main .content:not(.content-card){margin-block:0}
body.inner-page #main .section-head{margin-bottom:var(--fluid-head-gap)}
/* The top of a page without a picture (price list, history, terms, a plan): the same spaces. */
body.inner-page :is(.page-hero,.about-hero){padding:var(--fluid-hero-pad) 0 calc(var(--fluid-hero-pad) * .8)}

/* A title on one side and its text on the other («Η ΕΤΑΙΡΙΑ»): one column on a narrow screen; on a wide one two
   balanced columns, the title following the text while scrolling ([data-columns], columns.js), no empty white. */
body.inner-page :is(.energys-about__identity-grid,.control-result-grid){grid-template-columns:minmax(0,1fr);gap:var(--fluid-gap)}
@media(min-width:1024px){
  body.inner-page :is(.energys-about__identity-grid,.control-result-grid){grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,4vw,68px)}
}

/* The tops of the pages with a picture: the same height on every page for the same screen (64% of it, 440–576px; the
   text decides only when it needs more), the picture always covering it, and the same dark veil behind the text: from
   below on a narrow screen (the text at the bottom), from the left on a wide one (the text on the left). */
body.inner-page :is(.control-hero,.contact-hero,.news-hero,.evaluation-hero,.partner-hero,.yde-hero,.referral-hero,.referral-invite-hero,.energys-about__hero,.switch-checkout-hero){position:relative;isolation:isolate;display:flex;min-height:var(--fluid-hero-height);align-items:flex-end;padding:0;overflow:hidden}
body.inner-page :is(.control-hero__grid,.contact-hero__content,.news-hero__content,.evaluation-hero__content,.partner-hero__content,.yde-hero__content,.referral-hero__grid,.referral-invite-grid,.energys-about__hero-grid,.switch-checkout-hero__content){width:var(--container);min-height:0;margin-inline:auto;padding:var(--fluid-hero-pad) 0 calc(var(--fluid-hero-pad) * .8)}
body.inner-page :is(.control-hero__media,.contact-hero__media,.news-hero__media,.evaluation-hero__media,.partner-hero__media,.yde-hero__media,.referral-hero__media,.energys-about__hero-media,.switch-checkout-hero__media){position:absolute;inset:0;z-index:-2}
body.inner-page :is(.control-hero__media,.contact-hero__media,.news-hero__media,.evaluation-hero__media,.partner-hero__media,.yde-hero__media,.referral-hero__media,.energys-about__hero-media,.switch-checkout-hero__media) img{width:100%;height:100%;object-fit:cover}
body.inner-page :is(.control-hero__shade,.contact-hero__shade,.news-hero__shade,.evaluation-hero__shade,.partner-hero__shade,.yde-hero__shade,.referral-hero__shade,.energys-about__hero-shade,.switch-checkout-hero__shade){position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,20,49,.97) 0%,rgba(4,20,49,.88) 45%,rgba(4,20,49,.55) 100%)}
@media(min-width:921px){
  body.inner-page :is(.control-hero,.contact-hero,.news-hero,.evaluation-hero,.partner-hero,.yde-hero,.referral-hero,.referral-invite-hero,.energys-about__hero,.switch-checkout-hero){align-items:center}
  body.inner-page :is(.control-hero__shade,.contact-hero__shade,.news-hero__shade,.evaluation-hero__shade,.partner-hero__shade,.yde-hero__shade,.referral-hero__shade,.energys-about__hero-shade,.switch-checkout-hero__shade){background:linear-gradient(90deg,rgba(4,20,49,.97) 0%,rgba(4,20,49,.88) 40%,rgba(4,20,49,.5) 72%,rgba(4,20,49,.2) 100%)}
}

/* A box after the top of a page («Επικοινωνία»: the telephones; «ENERGYS Control»: «Η βάση του ελέγχου»): on a narrow
   screen it starts below the picture, never on it; on a wide one it may rest a little on its lower edge, the same on every
   page, never with empty picture below it. */
body.inner-page .contact-channels{margin-top:var(--fluid-hero-overlap)}
@media(max-width:920px){
  body.inner-page .control-hero{display:grid;grid-template-rows:minmax(var(--fluid-hero-height),auto) auto;align-items:stretch;background:none;color:inherit}
  body.inner-page .control-hero>.control-hero__grid{display:contents}
  body.inner-page :is(.control-hero__media,.control-hero__shade){grid-area:1/1;position:relative;inset:auto}
  body.inner-page .control-hero__grid>:first-child{grid-area:1/1;align-self:end;width:var(--container);margin-inline:auto;padding:var(--fluid-hero-pad) 0 calc(var(--fluid-hero-pad) * .8);color:#fff}
  body.inner-page .control-hero__grid>.control-report{grid-area:2/1;width:var(--container);max-width:760px;margin:var(--fluid-gap) auto 0;justify-self:center}
}

/* «Συχνές ερωτήσεις» and the pages for businesses (/epixeiriseis/): the same system as every inner page. The content
   takes the whole width of the page, the questions are boxes of the site with «+ / −» in the colour of the site, and
   the sections are one space apart. Only these pages carry .faq-page / .business-page: the plan page keeps its own. */
body.inner-page .faq-page .program-faq__list{max-width:none;gap:12px}
body.inner-page .faq-page .faq-group+.faq-group{margin-top:var(--fluid-section)}
body.inner-page .faq-page .faq-group>h2{margin:0 0 var(--fluid-head-gap)}
body.inner-page .faq-page .program-faq__item{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(7,31,73,.06)}
body.inner-page .faq-page .program-faq__item[open]{border-color:#b9d0e8}
body.inner-page .faq-page .program-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,13px + .8vw,22px) clamp(18px,14px + 1vw,26px);list-style:none;font-size:var(--fluid-lead);line-height:1.4}
body.inner-page .faq-page .program-faq__item summary::-webkit-details-marker{display:none}
body.inner-page .faq-page .program-faq__item summary::after{content:"+";display:inline-flex;flex:0 0 32px;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:#eaf3fc;color:var(--blue);font-size:1.3rem;font-weight:700;line-height:1}
body.inner-page .faq-page .program-faq__item[open] summary::after{content:"−";background:var(--blue);color:#fff}
body.inner-page .faq-page .program-faq__item p{padding:0 clamp(18px,14px + 1vw,26px) clamp(16px,13px + .8vw,22px);font-size:1rem;line-height:1.65}
body.inner-page .faq-page .program-faq__item a{color:var(--blue);font-weight:800}

body.inner-page #main.business-page>section:not(.page-hero){padding-block:var(--fluid-section)}
body.inner-page #main.business-page>section:not(:first-child)+section{padding-top:0}
body.inner-page .business-page :is(.program-similar,.programs-section) h2{margin:0 0 var(--fluid-head-gap)}
body.inner-page .business-page .program-similar__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* The newsletter (end of «Ενημέρωση» and of every article, never on the home page): a section of the site across the
   width of the content, in the colours of ENERGYS. The email and «Εγγραφή» on one line on a computer, one under the
   other on a phone. */
body.inner-page .newsletter-signup{max-width:none;margin:var(--fluid-section) 0 0}
body.inner-page .newsletter-signup__box{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fluid-gap);padding:clamp(24px,16px + 2.4vw,48px);border-radius:var(--radius,22px);background:linear-gradient(135deg,#061a3b,#0b3d78);color:#fff;box-shadow:var(--shadow)}
body.inner-page .newsletter-signup__copy h2{margin:0 0 10px;color:#fff;font-size:var(--fluid-heading)}
body.inner-page .newsletter-signup__copy p{margin:0;color:#cad8ea;font-size:var(--fluid-lead)}
body.inner-page .newsletter-signup__form{display:grid;gap:10px;align-content:center}
body.inner-page .newsletter-signup__form>label:first-child{color:#cad8ea;font-size:.82rem;font-weight:800}
body.inner-page .newsletter-signup__row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
body.inner-page .newsletter-signup__row input{min-height:52px;width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:#fff;color:var(--ink)}
body.inner-page .newsletter-signup__row .button{min-height:52px;width:100%}
body.inner-page .newsletter-signup .check{display:flex;gap:10px;align-items:flex-start;color:#cad8ea;font-size:.86rem;line-height:1.5}
body.inner-page .newsletter-signup .check a{color:#fff;font-weight:800;text-decoration:underline}
@media(min-width:640px){
  body.inner-page .newsletter-signup__row{grid-template-columns:minmax(0,1fr) auto}
  body.inner-page .newsletter-signup__row .button{width:auto;padding-inline:28px}
}
@media(min-width:1024px){
  body.inner-page .newsletter-signup__box{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,4vw,64px);align-items:center}
}