/* Greek edition only (coreconcepts.gr). Greek runs longer than English, and its letters come from the fallback font
   (Helvetica Neue, Arial), so a box sized for the English copy can be too small. Every rule carries :lang(el): it
   does nothing on the English site and wins over the same rule written inside a page.
   translate.py build links this file from every Greek page. Checks: el/checks/mf_el.py, fit_el.py + fit_sort.py. */

/* ---- Home, "what wins a customer" (Kyro, 2026-10-12: the last line of step 05 ran into the row of tabs) ----
   The steps were stacked with position:absolute inside a box of a fixed height tuned for the English copy. In Greek
   they share one grid cell instead, so the box is as tall as its longest step and the tabs always sit below it. */
.mf-anim .mf-txs:lang(el) { display: grid; }
.mf-anim .mf-tx:lang(el) { position: relative; inset: auto; grid-area: 1 / 1; }
/* six Greek tab names do not fit the column in one row: only the current one shows under its bar, as the design
   already does on tablets and phones; the last two hang from the right so they stay inside the column */
.mf-anim .mf-list:lang(el) { gap: 6px; padding-bottom: 22px; }
.mf-anim .mf-list li:lang(el) { flex: 1 1 0; position: relative; }
.mf-anim .mf-list li:lang(el) span { position: absolute; left: 0; top: 10px; opacity: 0; transition: opacity .3s; }
.mf-anim .mf-list li.on:lang(el) span { opacity: 1; }
.mf-anim .mf-list li:lang(el):nth-last-child(-n+2) span { left: auto; right: 0; }
@media (min-width: 1201px) {
  .mf-tx h3:lang(el) { font-size: clamp(30px, 2.75vw, 42px); letter-spacing: -.03em; line-height: 1.04; }.mf-tx h3:lang(el){font-size:clamp(30px, 2.75vw, 42px) !important}
}

/* ---- headings ----
   A Greek word is often half as long again as the English one, and one word that is wider than its column sticks
   out of it ("χρηματοοικονομικές" on a phone, "επαναλαμβανόμενων" in a narrow column). A tenth smaller, and a word
   may break as a last resort instead of leaving its column. */
.p .p-h2:lang(el) { font-size: clamp(32px, 3.9vw, 50px); overflow-wrap: break-word; hyphens: auto; }
.p .pg-h1:lang(el) { font-size: clamp(40px, 4.8vw, 72px); overflow-wrap: break-word; hyphens: auto; }
.p .pg-h1.s:lang(el) { font-size: clamp(34px, 3.9vw, 56px); }

/* ---- the small animated windows ----
   Their boxes have fixed sizes. Where a label had no shorter Greek wording (el/fixes.json holds the ones that had),
   the label itself gives way. */
/* These four are written with :where(), so they only replace the general rule of each label: a scene that sets its
   own size for a label keeps it. */
/* spaced capitals: the wide tracking costs a tenth of the line */
.p .s-cap:where(:lang(el)) { letter-spacing: .06em; }
/* in a window as narrow as a phone, titles, chips, buttons and side labels go one size down */
@container (max-width: 480px) {
  .p .s-h:where(:lang(el)) { font-size: 12.5px; }
  .p .s-chip:where(:lang(el)), .p .s-btn:where(:lang(el)) { font-size: 10.5px; padding-inline: 8px; }
  .p .s-lab:where(:lang(el)) { font-size: 9.5px; }
}
/* the round "who" badge holds a word in Greek (Εσείς): a pill instead of a circle */
.p .s-av.o:not(.s-nh):lang(el) { width: auto; padding: 0 7px; border-radius: 99px; }
/* a label that fills a card on its own (the steps of a small flow) */
.p .cp-n .s-h:lang(el) { font-size: 12.5px; line-height: 1.2; overflow-wrap: anywhere; }

/* ---- single scenes (each one measured with el/checks/fit_el.py and looked at with scene_el.py) ---- */
/* services hub, the deck of cards on a phone: no room for the list of sub-services next to the Greek title */
@media (max-width: 767.98px) {
  .p .h-jc .lb em:lang(el) { display: none; }
}
/* industry pages, the before/after slider on a phone: the "now" side runs to more lines */
@media (max-width: 767.98px) {
  .p .cmp:lang(el) { height: 404px; }
}
/* AI consulting, the board of use cases on a phone: three lanes whose headers wrap */
@media (max-width: 767.98px) {
  .p .id-win .p-fvis[data-tile="ixmap"]:lang(el) { height: 464px; }
}
/* finance, the three-step plan on a phone: the label column has to hold ΑΡΓΟΤΕΡΑ */
@container (max-width: 480px) {
  .p .if-col .s-cap:lang(el) { width: 62px; font-size: 9.5px; letter-spacing: .02em; }
}
/* gyms, three ads with the same headline in heavy italic capitals */
.p .ig-adh:lang(el) { font-size: 15px; }
@container (max-width: 480px) {
  .p .ig-adh:lang(el) { font-size: 11px; }
}
/* tech consulting, the sample site in the window: its headline is a line longer in Greek */
.p .it-hl:lang(el) { font-size: min(18px, 2.5cqw); line-height: 1.12; }
/* SEO, the keyword rows on a phone */
@container (max-width: 480px) {
  .p [data-tile="keywords"] .s-p:lang(el) { font-size: 11px; line-height: 1.3; }
}
/* brand guide, the fan of pages; growth strategy, the nodes; health, the search pill */
@container (max-width: 480px) {
  .p [data-tile="pages"] .s-h:lang(el) { font-size: 11.5px; }
  .p [data-tile="nodes"] .s-h:lang(el) { font-size: 12.5px; }
  .p [data-tile="flow3"] .s-p:lang(el) { font-size: 11px; }
}
/* process, the list of change rounds in its small phone tile: the sub line gives its two lines to the list */
@media (max-width: 767.98px) {
  .p .pr-tile .prs-sub:lang(el) { display: none; }
}
.p .prs-next .s-chip:lang(el) { padding-inline: 7px; }
/* Home, the chat in the small "any tool" window on a phone */
@media (max-width: 767.98px) {
  .cg-me:lang(el), .cg-bub:lang(el) { font-size: 10px; }
}

/* ---- header ----
   Six Greek menu names and "Επικοινωνήστε μαζί μας" need a wider bar than the English ones: between 1100 and 1200px
   the button left the bar. In Greek the burger takes over below 1200px (in English: below 1100px). */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .cc-site .cc-h__nav:lang(el) { display: none; }
  html:has(.cc-site.p, .cc-themed) .cc-site .cc-h__theme:lang(el) { margin-left: auto; }  /* the light/dark switch takes the push, the button follows it */
  .cc-site .cc-h__burger:lang(el) { display: grid; }
}
/* With Reviews in the menu (2026-10-15) the Greek bar ran out between 1200 and 1440px: the button left it by up to
   120px at 1280. There the Greek menu sits a little tighter, so laptops keep the full menu instead of the burger. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .cc-site .cc-h__bar:lang(el) { gap: 16px; }
  .cc-site .cc-h__link:lang(el) { padding: 0 7px; font-size: 14px; }
}
/* With Pricing in the menu as well (eight items, 2026-10-16; cc-site.css tightens the English one) the Greek bar ran
   out again: the button left it by 35px at 1200, 70px at 1280 and 37px at 1440. With eight items the burger takes over
   below 1280px, and up to 1535px the Greek menu sits tighter. Seven items: the rules above, unchanged. */
/* With the light/dark switch in the bar as well (16 Oct 2026) the button left it again by up to 40px at 1280: the
   burger now takes over below 1340px, and the switch takes the push to the right. */
@media (min-width: 1200px) and (max-width: 1339.98px) {
  .cc-site .cc-h__bar:has(.cc-h__list > .cc-h__item:nth-child(8)) .cc-h__nav:lang(el) { display: none; }
  html:has(.cc-site.p, .cc-themed) .cc-site .cc-h__bar:has(.cc-h__list > .cc-h__item:nth-child(8)) .cc-h__theme:lang(el) { margin-left: auto; }
  .cc-site .cc-h__bar:has(.cc-h__list > .cc-h__item:nth-child(8)) .cc-h__burger:lang(el) { display: grid; }
}
/* below 700px the Greek button and the switch leave no room for the menu button: the button goes, as the English one
   does below 600px (the menu panel has it) */
@media (min-width: 600px) and (max-width: 699.98px) {
  .cc-site .cc-h__cta:lang(el) { display: none; }
  html:has(.cc-site.p, .cc-themed) .cc-site .cc-h__theme ~ .cc-h__burger:lang(el) { margin-left: 0; }
}
@media (min-width: 1340px) and (max-width: 1535.98px) {
  .cc-site .cc-h__bar:has(.cc-h__list > .cc-h__item:nth-child(8)):lang(el) { gap: 14px; }
  .cc-site .cc-h__list:has(> .cc-h__item:nth-child(8)) .cc-h__link:lang(el) { padding: 0 6px; font-size: 14px; }
  .cc-site .cc-h__list:has(> .cc-h__item:nth-child(8)) .cc-h__item + .cc-h__item:lang(el)::before { margin: 0 2px; }
}
/* tech consulting, the offer card: the label column holds ΣΕ ΠΟΙΟΝ on one line */
.p .it-pr:lang(el) { grid-template-columns: 66px minmax(0, 1fr); }
/* finance, the plan cards side by side: a card grows with a list item that wraps */
@container (min-width: 481px) {
  .p .if-col:lang(el) { height: auto !important; min-height: 42%; }
}

/* ---- footer ----
   The two columns of services were 142px wide each on a desktop: nearly every Greek service name broke into two or
   three lines while the column with the logo stood half empty. In Greek the links get the room. */
@media (min-width: 1024px) {
  .cc-site .cc-f__grid:lang(el) { grid-template-columns: minmax(260px, .7fr) minmax(0, 2.4fr); gap: 48px; }
  .cc-site .cc-f__nav:lang(el) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, .6fr); gap: 32px; }
}

/* ---- other widths (every page measured at 360, 430, 768, 1024, 1280 and 1920 as well) ---- */
/* service pages, the row of five stages on a small phone */
@media (max-width: 430px) {
  .p .p-circuit li b:lang(el) { font-size: min(11px, 2.6vw); }
}
/* industry pages, the accordion: the long industry names take two lines instead of being cut at the panel's edge
   (the title's box keeps one width while a panel opens, so nothing reflows) */
.p .id-acc-i .t b:lang(el) { font-size: 17px; line-height: 1.18; white-space: normal; }
/* Home, the team strip on a tablet: first names in the closed cards */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .p .ps-cap b:lang(el) { font-size: 19px; }
}
/* lists of ✓ and ✕ rows in a card (what AI helps with), in a phone-width window */
@container (max-width: 480px) {
  .p .s-card[class*="-ai"] .s-p:lang(el) { font-size: 11.5px; line-height: 1.3; }
}
/* before/after sliders: the chips and buttons of the sample site */
@media (max-width: 767.98px) {
  .p .cmp .s-chip:lang(el), .p .cmp .s-btn:lang(el) { font-size: 10.5px; padding-inline: 8px; }
}
/* address bars of the sample browsers: one line, cut with an ellipsis like a real tab title */
.p .p-url:lang(el) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Home, the small "any tool" window */
.mf-bar:lang(el) { letter-spacing: .06em; }
.mf-before .mf-q:lang(el), .mf-before .mf-bub:lang(el) { font-size: 10.5px; line-height: 1.3; }
.mf-before .mf-err:lang(el) { font-size: 11px; }
.cg-bub:lang(el), .cg-no:lang(el) { white-space: normal; }
/* small phones (360px) */
@media (max-width: 379.98px) {
  .p .cmp:lang(el) { height: 420px; }
  .p .id-win .p-fvis[data-tile="ixmap"]:lang(el) { height: 480px; }
  .p .ih-q:lang(el) { font-size: 8.5px; padding: 4px; }
  .p .ov-n:lang(el) { font-size: 11.5px; }
  .cg-me:lang(el), .cg-bub:lang(el) { font-size: 10px; }
}
@container (max-width: 340px) {
  .p .ig-adh:lang(el) { font-size: 9.5px; }
  .p [data-tile="pages"] .s-h:lang(el) { font-size: 11px; }
  .p .prs-next .s-chip:lang(el) { font-size: 9.5px; padding-inline: 6px; }
  .p [data-tile="flow3"] .s-p:lang(el) { font-size: 10px; }
}
/* health, the search pill above the first card (at every width) */
.p .ih-q:lang(el) { font-size: 9.5px; padding: 4px 6px; gap: 4px; }
@container (max-width: 480px) {
  .p .ih-q:lang(el) { font-size: 9px; padding: 4px 5px; gap: 3px; }
}
@media (max-width: 379.98px) {
  .p .ih-q:lang(el) { font-size: 8.5px; padding: 4px; }
}
/* Home, the prompt being typed in the main window, on a phone: the whole sentence instead of an ellipsis */
@media (max-width: 767.98px) {
  .mf-prompt .say:lang(el) { font-size: 12.5px; }
}

/* Automotive, the PPF picker on small phones: the caption beside an option's name is cut with an ellipsis when it
   does not fit. One size down and "Προφυλακτήρας, άκρη καπό" is whole at 360px (round 2, 2026-10-12). */
@media (max-width:379.98px){.ia-opt small:lang(el){font-size:9.5px}}

/* Home, the email band (16 Oct 2026): beside the Greek button ("Επικοινωνήστε μαζί μας") the field kept about 100 px,
   so the field and the button stack at every width, as they do on English phones (manifesto-lab/cta.html) */
.cce .cce-row:lang(el) { flex-direction: column; padding: 0; border: 0; border-radius: 0; background: none; gap: 10px; }
.cce .cce-in:lang(el) { flex: none; width: 100%; border: 1px solid var(--cce-line); background: rgba(var(--cc-fg, 255, 255, 255), .05); }
.cce .cce-in:focus:lang(el) { border-color: var(--cce-mint); }
.cce .cce-row.is-bad .cce-in:lang(el) { border-color: var(--cce-bad); }
.cce .cce-btn:lang(el) { width: 100%; }