/* =============================================================================
   Information Planet - front-end stylesheet
   =============================================================================
   One file, no preprocessor, no build step. Ordered from the inside out:

     1. Tokens        design decisions as custom properties
     2. Reset         only what we actually need
     3. Typography    the prose scale
     4. Layout        wrap / section rhythm
     5. Components    buttons, cards, forms…
     6. Regions       header, footer, hero
     7. Templates     page-specific bits
     8. Utilities     the handful worth having
     9. Motion / print

   If you change a colour or a radius, change the token - not the component.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

/* Archivo for headings, Inter for text.
   Outfit was the display face and the client's word for it was soft: a
   geometric sans with round terminals and open counters, which is the voice of
   a wellness brand. This site sells a year of somebody's life abroad and its
   brand is black on yellow. Archivo is a neo-grotesque built for signage and
   small print - narrower, squarer, with real weight at 800 - so a headline
   reads as a statement instead of an invitation. Same self-hosted woff2, same
   two subsets, no extra request. */
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/archivo-800-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Archivo;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/archivo-800-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}


:root{
  /* Brand ---------------------------------------------------------------- */
  --accent:#ffc700;            /* IP yellow - CTAs only, never large areas   */
  --accent-600:#f0b400;
  --accent-100:#fff6d1;
  --accent-050:#fffbea;

  --coral:#ff6b4a;             /* secondary accent, used sparingly           */
  --coral-050:#fff1ed;

  --ink:#15171c;               /* body text, dark sections                   */
  --ink-800:#23262e;
  --ink-600:#4a4f5a;
  --ink-400:#767c88;
  --ink-200:#c9ced8;
  --ink-100:#e6e9ef;
  --ink-050:#f4f6fa;

  --sand:#fbf7f0;              /* warm neutral background for alternating rows */
  --white:#fff;
  --ok:#12805c;
  --err:#c0392b;

  /* Type ------------------------------------------------------------------ */
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:Archivo,var(--font-body);

  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.25rem + 1.1vw,2rem);
  --fs-3xl:clamp(1.875rem,1.4rem + 2vw,2.75rem);
  --fs-4xl:clamp(2.25rem,1.5rem + 3.2vw,4rem);

  --lh-tight:1.12;
  --lh-snug:1.3;
  --lh-base:1.65;

  /* Space (8px scale) ----------------------------------------------------- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.5rem; --s-8:3rem;
  --s-9:4rem;   --s-10:5rem;  --s-11:6.5rem;

  --section-y:clamp(3rem,2rem + 5vw,6rem);

  /* Shape ----------------------------------------------------------------- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --shadow-sm:0 1px 2px rgba(21,23,28,.06),0 1px 3px rgba(21,23,28,.04);
  --shadow-md:0 4px 12px rgba(21,23,28,.07),0 2px 4px rgba(21,23,28,.04);
  --shadow-lg:0 18px 40px rgba(21,23,28,.12),0 4px 10px rgba(21,23,28,.05);

  /* Depth ----------------------------------------------------------------
     Every card on this site was a white rectangle with a 1px grey outline, and
     the client's word for the result was flat. An outline draws the edge of a
     card; a shadow says the card is on top of the page, which is the thing a
     grid of six offers needs in order to read as six objects rather than as a
     table.

     Three layers, not one: a hairline that does the job the border used to do
     at the top edge, a close shadow for contact, and a wide soft one for the
     lift. `--lift` is the hover state and it is deliberately much stronger -
     picking a card up should be visible from across the screen. */
  --shadow-card:
    0 0 0 1px rgb(21 23 28/.04),
    0 1px 2px rgb(21 23 28/.05),
    0 8px 24px -8px rgb(21 23 28/.14);
  --shadow-lift:
    0 0 0 1px rgb(21 23 28/.04),
    0 2px 4px rgb(21 23 28/.06),
    0 26px 48px -16px rgb(21 23 28/.28);
  /* On the dark band a shadow is invisible, so depth there is a light edge. */
  --shadow-dark:
    inset 0 1px 0 rgb(255 255 255/.07),
    0 24px 48px -20px rgb(0 0 0/.8);
  --ring-accent:0 0 0 3px var(--accent-100);

  /* Rhythm ---------------------------------------------------------------
     One number for the gap between a heading and what it introduces, used by
     every section head, every panel heading and every card head. It was six
     different values, which is what "paddingy nedodržuješ" means when you can
     see three of them on one screen. */
  --head-gap:var(--s-6);

  --wrap:1200px;
  --wrap-narrow:760px;
  --header-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s var(--ease);
  --t-base:.28s var(--ease);
  --t-slow:.5s var(--ease);    /* photo zooms, where the motion is the effect */
}

/* -----------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
img{border-radius:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.18em}
a:hover{text-decoration-color:currentColor}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--ink)}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--white);padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-md) 0
}
.skip-link:focus{left:0}

.icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon--md{width:1.5em;height:1.5em}
.icon--lg{width:2rem;height:2rem}
.icon--star{width:1.25rem;height:1.25rem;fill:currentColor;stroke:none}

/* -----------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,h2,h3,h4,.hero__title,.section__title{
  font-family:var(--font-head);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:-.02em;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-bottom:var(--s-2);
}
.eyebrow::before{
  content:"";display:inline-block;width:1.5rem;height:2px;
  background:var(--accent);vertical-align:middle;margin-right:.6rem;
  transform:translateY(-2px)
}

.prose{max-width:70ch}
.prose > * + *{margin-top:var(--s-4)}
.prose h2{font-size:var(--fs-2xl);margin-top:var(--s-8);scroll-margin-top:calc(var(--header-h) + 2rem)}
/* The space above a heading separates it from the text before it. The first
   block has no text before it, so that margin only stacks on top of the
   column's own padding: 48px on 48px, for nothing. */
.prose > :first-child{margin-top:0}
.prose h3{font-size:var(--fs-xl);margin-top:var(--s-6)}
.prose h4{font-size:var(--fs-lg);margin-top:var(--s-5)}
.prose p{color:var(--ink-800)}
.prose a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.prose a:hover{background:var(--accent-050)}
.prose ul,.prose ol{padding-left:1.35em;color:var(--ink-800)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:var(--s-2)}
.prose li::marker{color:var(--accent-600)}
.prose img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);margin-block:var(--s-6)}
.prose figure{margin-block:var(--s-6)}
.prose figcaption{font-size:var(--fs-sm);color:var(--ink-400);margin-top:var(--s-2)}
.prose blockquote{
  border-left:4px solid var(--accent);
  padding:var(--s-2) 0 var(--s-2) var(--s-5);
  font-size:var(--fs-lg);color:var(--ink);font-style:italic
}
.prose hr{border:0;border-top:1px solid var(--ink-100);margin-block:var(--s-8)}
.prose table{
  font-size:var(--fs-sm);margin-block:var(--s-6);
  display:block;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch
}
.prose td,.prose th{overflow-wrap:break-word}
/* Long unbroken strings (URLs, welded table cells from the old site) must not
   be able to widen the column either. */
.prose{overflow-wrap:break-word}
.prose img,.prose iframe,.prose video{max-width:100%;height:auto}
.prose th,.prose td{border:1px solid var(--ink-100);padding:var(--s-3);text-align:left}
.prose th{background:var(--ink-050);font-weight:600}
/* Alignment the old price tables carried in a style attribute, kept when that
   attribute was dropped. Same class name core uses, so the editor agrees. */
.prose :is(th,td).has-text-align-center{text-align:center}
.prose :is(th,td).has-text-align-right{text-align:right}
.prose td small{color:var(--ink-400);font-size:var(--fs-xs)}
.prose code{background:var(--ink-050);padding:.15em .4em;border-radius:var(--r-sm);font-size:.9em}

/* The old site wrote a section title across two headings: "Zaži High School"
   and under it "v tých najatraktívnejších destináciách". The second line is a
   subtitle, so it is a paragraph now and must not read as body text. It sits
   tight under the heading it belongs to. */
.prose .lead{
  font-family:var(--font-head);font-size:var(--fs-lg);line-height:var(--lh-snug);
  color:var(--ink-600);max-width:46ch
}
.prose :is(h2,h3,h4) + .lead{margin-top:var(--s-2)}

/* Schools and places that used to be promo cards in the old CMS: photo,
   title, teaser, "Zistiť viac". The links were the only content in them. */
.prose .linklist{list-style:none;padding-left:0;display:grid;gap:var(--s-2)}
.prose .linklist li{margin-top:0;padding-left:1.1em;position:relative}
.prose .linklist li::before{
  content:"›";position:absolute;left:0;top:0;
  color:var(--accent-600);font-weight:700
}
.prose .linklist a{font-weight:600}

/* Country facts: a figure and what it measures. Imported as a column of loose
   paragraphs, now one row each, with the number carrying the weight. */
.prose .statlist{
  list-style:none;padding-left:0;
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}
.prose .statlist li{
  margin-top:0;padding:var(--s-4);
  background:var(--ink-050);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:var(--s-1);
  font-size:var(--fs-sm);color:var(--ink-600)
}
.prose .statlist li strong{
  font-family:var(--font-head);font-size:var(--fs-xl);font-weight:700;
  line-height:1;color:var(--ink)
}

/* Editorial helpers used by block patterns */
.note{
  background:var(--accent-050);
  border:1px solid var(--accent-100);
  border-radius:var(--r-lg);
  padding:var(--s-5);
}
.is-style-ip-check{list-style:none;padding-left:0}
.is-style-ip-check li{position:relative;padding-left:2rem}
.is-style-ip-check li::before{
  content:"";position:absolute;left:0;top:.45em;width:1.15rem;height:1.15rem;border-radius:var(--r-full);
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/.72rem no-repeat
}

/* -----------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,var(--wrap-narrow))}
@media (max-width:640px){.wrap,.wrap--narrow{width:min(100% - 2rem,var(--wrap))}}

.section{padding-block:var(--section-y)}
.section--stats,.section--reviews{padding-block:var(--s-8)}
.section--products,.section--steps,.section--dest{background:var(--sand)}
.section--refs{background:var(--ink);color:var(--white)}
.section--refs .eyebrow{color:var(--accent)}
.section--refs .eyebrow::before{background:var(--accent)}

.section__head{margin-bottom:var(--head-gap);display:grid;gap:var(--s-2);position:relative}
.section__head--center{text-align:center;justify-items:center;max-width:64ch;margin-inline:auto}
.section__head--center .eyebrow::before{display:none}
.section__title{font-size:var(--fs-3xl)}
.section__lead{color:var(--ink-600);font-size:var(--fs-lg);max-width:60ch}
.section--refs .section__lead{color:var(--ink-200)}
.section__more{
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-600)
}
.section__more:hover{color:var(--ink)}
.section__more .icon{transition:transform var(--t-fast)}
.section__more:hover .icon{transform:translateX(3px)}
@media (min-width:900px){
  .section__head:not(.section__head--center){grid-template-columns:1fr auto;align-items:end}
  .section__head:not(.section__head--center) .eyebrow{grid-column:1}
  .section__head:not(.section__head--center) .section__title{grid-column:1}
  .section__head:not(.section__head--center) .section__more{grid-column:2;grid-row:1/3;justify-self:end}
}
.section__foot{margin-top:var(--s-7);text-align:center}

.cardgrid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cardgrid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cardgrid--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cardgrid--tight{gap:var(--s-3)}

.empty{color:var(--ink-400);font-size:var(--fs-lg);text-align:center;padding-block:var(--s-8)}

/* -----------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Buttons ------------------------------------------------------------------ */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--ink);--btn-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap;
  padding:.85rem 1.4rem;border-radius:var(--r-full);
  background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bd);
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.05rem 1.9rem;font-size:var(--fs-base)}
.btn--primary{--btn-bg:var(--accent);--btn-bd:var(--accent);--btn-fg:var(--ink)}
.btn--primary:hover{--btn-bg:var(--accent-600);--btn-bd:var(--accent-600)}
.btn--ghost{--btn-bg:transparent;--btn-bd:var(--ink-200);--btn-fg:var(--ink)}
.btn--ghost:hover{--btn-bd:var(--ink);--btn-bg:var(--ink-050)}
.btn--ghost-light{--btn-bg:rgba(255,255,255,.08);--btn-bd:rgba(255,255,255,.55);--btn-fg:var(--white)}
.btn--ghost-light:hover{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-bd:var(--white)}
.wp-block-button.is-style-ip-primary .wp-block-button__link{
  background:var(--accent);color:var(--ink);border-radius:var(--r-full);
  font-family:var(--font-head);font-weight:700;padding:.9rem 1.6rem
}
.wp-block-button.is-style-ip-ghost .wp-block-button__link{
  background:transparent;color:var(--ink);border:2px solid var(--ink-200);border-radius:var(--r-full);
  font-family:var(--font-head);font-weight:700;padding:.9rem 1.6rem
}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border-radius:var(--r-full);
  background:var(--ink-050);color:var(--ink-600);
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;
  border:1px solid transparent;transition:all var(--t-fast)
}
.chip:hover{background:var(--ink-100);color:var(--ink)}
.chip.is-active{background:var(--ink);color:var(--white)}
.chip--lg{padding:.75rem 1.2rem;font-weight:600;justify-content:center;background:var(--white);border-color:var(--ink-100);box-shadow:var(--shadow-sm)}

.iconbtn{
  width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink-600);
  transition:background var(--t-fast),color var(--t-fast)
}
.iconbtn:hover{background:var(--ink-050);color:var(--ink)}

/* Product cards ------------------------------------------------------------ */

/* The programme cards.

   They were full-width rows with the photograph faded in behind the right-hand
   end, and a row of nine flags for the countries. The flags looked clickable
   and were not - the whole row is one link - and they said in nine little
   images what "9 krajín" says in three words.

   So the photograph comes forward and becomes the card, in the same visual
   language as the country signpost and the popular programmes. Somebody
   choosing between a school year and a summer camp chooses with their eyes
   first. */
/* Flex, not grid, for one reason: five cards in a three-column grid leave two
   stranded at the left edge of the second row. Wrapping flex items centre the
   row that did not fill, so 3 + 2 sits under the heading instead of beside it,
   and a sixth product needs no change here. */
.prodlist{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4)
}
.prodcard{flex:1 1 17rem;max-width:26rem}
/* Exactly a third, so the two cards on the second row are the same width as
   the three above them. `flex:1 1 20rem` let them grow to fill the row and the
   orphan pair came out wider than the cards it sits under.
   52rem, not 64rem: between the two the row still fits three, and the two
   orphans below grew to their 26rem cap. That was survivable while the card was
   a fixed 19rem tall, but now the card is a 4:3 photograph, so wider also means
   taller and the second row came out half as big again as the first. */
@media (min-width:52rem){
  .prodcard{flex:0 1 calc((100% - 2 * var(--s-4)) / 3);max-width:none}
}
/* A white card made of a photograph and a line of text, the same shape as the
   popular programmes above it. Nothing is written over the picture: the card
   used to be a photograph with a scrim, an icon, a title, a sentence and a
   count printed on it, and the picture was doing the least visible work of the
   five. Here it gets its own rectangle and the words get theirs. */
.prodcard{
  position:relative;display:flex;flex-direction:column;
  overflow:hidden;padding:0;
  border-radius:var(--r-lg);
  background:var(--white);text-decoration:none;color:inherit;
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),transform var(--t-base)
}
.prodcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.prodcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.prodcard__media{display:block;position:relative;aspect-ratio:4/3;background:var(--ink-100)}
.prodcard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow)}
.prodcard--photo:hover .prodcard__img{transform:scale(1.04)}

/* The icon stays on the photograph, in the top left corner, which is where it
   was and where the client wants it: five cards are told apart by a yellow mark
   in the same place on every one of them before a word is read. Down on the
   white strip it competes with the name it is meant to label. */
.prodcard__icon{
  position:absolute;z-index:1;top:var(--s-4);left:var(--s-4);
  display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:.6rem;
  border-radius:var(--r-md);background:var(--accent);color:var(--ink);
  box-shadow:0 2px 10px rgb(0 0 0/.25);
  transition:transform var(--t-base)
}
/* A product with no photograph has no corner to sit in, so it rides the row. */
.prodcard__icon--inline{
  position:static;flex:0 0 auto;box-shadow:none
}
.prodcard__foot{
  flex:1;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5)
}
.prodcard:hover .prodcard__icon{transform:scale(1.06)}
.prodcard__title{
  flex:1;min-width:0;margin:0;
  font-size:var(--fs-xl);line-height:var(--lh-snug)
}
.prodcard__arrow{flex:0 0 auto;color:var(--ink-200);transition:color var(--t-fast),transform var(--t-fast)}
.prodcard:hover .prodcard__arrow{color:var(--ink);transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .prodcard:hover{transform:none}
  .prodcard:hover .prodcard__img{transform:none}
  .prodcard:hover .prodcard__icon{transform:none}
  .prodcard:hover .prodcard__arrow{transform:none}
}

/* A section heading that has to carry the section on its own, now that the
   uppercase eyebrow above it is gone. */
.section__title--xl{font-size:var(--fs-3xl)}

/* Generic page card -------------------------------------------------------- */
.pagecard__link{
  display:flex;flex-direction:column;height:100%;text-decoration:none;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;transition:box-shadow var(--t-base),transform var(--t-base)
}
.pagecard__link:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.pagecard__media{display:block;aspect-ratio:16/9;background:var(--ink-050);overflow:hidden}
.pagecard__media img{width:100%;height:100%;object-fit:cover}
.pagecard__body{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.pagecard__title{font-size:var(--fs-lg)}
.pagecard__note{color:var(--ink-600);font-size:var(--fs-sm);flex:1}
.pagecard__more{font-size:var(--fs-sm);font-weight:600;color:var(--ink-600);display:inline-flex;align-items:center;gap:.35rem}
.pagecard__link:hover .pagecard__more{color:var(--ink)}
.thumb-fallback{display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--ink-050),var(--accent-050))}

/* Stats -------------------------------------------------------------------- */
/* 8rem, not 160px. Two 160px columns and the 24px gap between them need 344px,
   and a 360px phone leaves the wrap 328px, so the four numbers missed a second
   column by sixteen pixels and stacked into 605px of scrolling for four words.
   At 8rem they pair up from 320px upwards and still spread to four across as
   soon as there is room. */
.stats{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));text-align:center}
.stat{display:grid;gap:var(--s-1);padding:var(--s-4)}
.stat__value{font-family:var(--font-head);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);font-weight:800;line-height:1;color:var(--ink)}
.stat__value::after{content:"";display:block;width:2rem;height:3px;background:var(--accent);margin:.6rem auto 0;border-radius:2px}
.stat__label{color:var(--ink-600);font-size:var(--fs-sm)}

/* Why-us cards ------------------------------------------------------------- */
.whygrid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.whycard{
  display:grid;gap:var(--s-3);align-content:start;
  background:var(--white);border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),transform var(--t-base)
}
.whycard:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.whycard__icon{
  width:3.25rem;height:3.25rem;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--accent);color:var(--ink);
  box-shadow:0 6px 14px -4px rgb(240 180 0/.6)
}
.whycard__title{font-size:var(--fs-lg)}
.whycard__text{color:var(--ink-600);font-size:var(--fs-sm)}

/* Steps -------------------------------------------------------------------- */
.steps{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:step}
.step{position:relative;display:grid;gap:var(--s-2);align-content:start}
.step__num{
  width:2.75rem;height:2.75rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink);
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-lg);
  display:grid;place-items:center;margin-bottom:var(--s-2)
}
.step__title{font-size:var(--fs-lg)}
.step__text{color:var(--ink-600);font-size:var(--fs-sm)}
@media (min-width:980px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:1.35rem;left:3.25rem;right:-1.5rem;height:2px;
    background:repeating-linear-gradient(90deg,var(--ink-200) 0 6px,transparent 6px 12px)
  }
}

/* USP bar / fact bar ------------------------------------------------------- */
.uspbar{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.uspbar__item{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--ink-600);font-size:var(--fs-sm)}
.uspbar__item .icon{color:var(--accent-600);margin-top:.15rem}
.uspbar__item strong{display:block;color:var(--ink);font-family:var(--font-head);font-size:var(--fs-base)}
.uspbar__item em{font-style:normal}

/* The facts strip is a band, not a section.
   With the full --section-y above and below it, and the page body adding its
   own 96 px on top, a school profile opened with 240 px of empty cream between
   the city and the first sentence about the school. */

/* A profile with one or two facts should not stretch them across 1150 px like a
   banner. Language schools often have only the city filled in until somebody
   adds the price, and one centred label in a full-width cream box reads as a
   widget that failed to load. */

/* References --------------------------------------------------------------- */
.refgrid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.refcard{
  position:relative;display:flex;flex-direction:column;gap:var(--s-4);
  background:var(--ink-800);border-radius:var(--r-xl);padding:var(--s-6);
  border:1px solid rgba(255,255,255,.08)
}
.section--reflist .refcard,.refgrid--list .refcard{background:var(--white);border:1px solid var(--ink-100);color:var(--ink)}
.refcard::before{
  content:"”";position:absolute;top:.25rem;right:1.25rem;
  font-family:var(--font-head);font-size:5rem;line-height:1;color:var(--accent);opacity:.5
}
.refcard__tag{
  align-self:flex-start;font-size:var(--fs-xs);font-weight:600;
  padding:.25rem .7rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink)
}
.refcard__quote{font-size:var(--fs-lg);line-height:1.5;flex:1;color:inherit}
/* The quote is the click target, but the whole card should feel clickable. */
.refcard{transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-fast)}
.refcard:has(.refcard__link:hover){transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.refcard__link{text-decoration:none;color:inherit;display:block}
.refcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.refcard__video{position:relative;z-index:2}
.refcard__more{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:var(--s-2);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);color:var(--accent)
}
.refcard__more::after{content:"→";transition:transform var(--t-fast)}
.refcard:has(.refcard__link:hover) .refcard__more::after{transform:translateX(4px)}
.refgrid--list .refcard__more,.section--reflist .refcard__more{color:var(--ink)}
.refcard__foot{display:flex;align-items:center;gap:var(--s-3);margin-top:auto}
.refcard__avatar{width:5rem;height:5rem;border-radius:var(--r-full);overflow:hidden;flex:none;background:var(--accent-100)}
.refcard__avatar img{width:100%;height:100%;object-fit:cover}
.refcard__avatar-ph{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-head);font-weight:700;color:var(--ink)}
.refcard__meta{display:grid;line-height:1.35}
.refcard__name{font-family:var(--font-head);font-size:var(--fs-base)}
.refcard__school{font-size:var(--fs-sm);opacity:.7}
.refcard__video{margin-left:auto;width:2.5rem;height:2.5rem;border-radius:var(--r-full);background:var(--accent);color:var(--ink);display:grid;place-items:center}

/* Sidebar call to action ---------------------------------------------------
   Replaces the sixteen-field form that used to stand here. See parts/cta-card.php
   for why: in a narrow rail the form was a 1105px tower that set the height of
   the whole article beside it. */
.ctacard{
  background:var(--ink);color:var(--white);
  border-radius:var(--r-xl);padding:var(--s-6);
  display:grid;gap:var(--s-3);justify-items:start
}
.ctacard__title{font-size:var(--fs-xl);color:var(--white)}
.ctacard__lead{font-size:var(--fs-sm);color:rgba(255,255,255,.78);line-height:var(--lh-base)}
.ctacard__btn{width:100%;justify-content:center;margin-top:var(--s-1)}
.ctacard__note{
  display:flex;align-items:center;gap:.4rem;
  font-size:var(--fs-xs);color:rgba(255,255,255,.62)
}
.ctacard__note .icon{color:var(--accent)}
.ctacard__phone{font-size:var(--fs-sm);color:rgba(255,255,255,.78)}
.ctacard__phone a{color:var(--accent);text-decoration:none;white-space:nowrap}
.ctacard__phone a:hover{text-decoration:underline}

/* Team on the contact page ------------------------------------------------- */
.teamgrid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.teamcard{
  display:grid;gap:var(--s-2);justify-items:start;
  background:var(--white);border:1px solid var(--ink-100);
  border-radius:var(--r-xl);padding:var(--s-5)
}
.teamcard__photo{
  width:5rem;height:5rem;border-radius:var(--r-full);overflow:hidden;
  background:var(--accent-100);margin-bottom:var(--s-2)
}
.teamcard__photo img{width:100%;height:100%;object-fit:cover}
.teamcard__photo-ph{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-2xl);color:var(--ink)
}
.teamcard__name{font-size:var(--fs-lg)}
.teamcard__role{font-size:var(--fs-sm);color:var(--ink-600)}
.teamcard__links{display:grid;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--fs-sm)}
.teamcard__links a{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--ink);text-decoration:none;overflow-wrap:anywhere
}
.teamcard__links a:hover{color:var(--accent-600);text-decoration:underline}
.teamcard__links .icon{color:var(--accent-600);flex:none}

/* Hub index: the list of what a programme offers in one country ------------- */
/* The hub is the offer, in the same white as the school list beside it. It was
   a sand band below the text, which is what made "Stredné školy → USA" read as
   a different template from "Stredné školy → Kanada". */
.section--hub .section__lead{color:var(--ink-600)}
.hubmore{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--ink-100)}
.hubmore__title{font-size:var(--fs-lg);margin-bottom:var(--s-4)}
.hubmore__list{
  display:grid;gap:var(--s-2) var(--s-6);list-style:none;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
.hubmore__list a{
  display:inline-block;color:var(--ink);font-size:var(--fs-sm);
  text-decoration:none;border-bottom:1px solid var(--ink-200);padding-block:.15rem
}
.hubmore__list a:hover{border-color:var(--accent);color:var(--accent-600)}

/* Single reference ---------------------------------------------------------
   A thank-you letter, not a magazine feature. The person comes first at a
   human size, the letter is set as the quotation it is, and the photo stays
   inside the measure of the text: most of them are stock scenery of the
   destination, which has no business being a full-bleed hero. */
.reference{padding-block:var(--s-8) var(--s-9)}
.reference__head{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
.reference__head .eyebrow a{color:inherit;text-decoration:none}
.reference__head .eyebrow a:hover{text-decoration:underline}
.reference__who{display:flex;align-items:center;gap:var(--s-4)}
.reference__avatar{
  width:5rem;height:5rem;border-radius:var(--r-full);overflow:hidden;
  flex:none;background:var(--accent-100)
}
.reference__avatar img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;box-shadow:none}
.reference__avatar-ph{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-2xl);color:var(--ink)
}
.reference__ident{display:grid;gap:var(--s-1)}
.reference__name{font-size:var(--fs-3xl);line-height:var(--lh-tight)}
.reference__meta{color:var(--ink-600);font-size:var(--fs-sm)}
.reference__tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-1)}
.reference__tag{
  font-size:var(--fs-xs);font-weight:600;padding:.2rem .6rem;
  border-radius:var(--r-full);background:var(--accent-100);color:var(--ink)
}
.reference__quote{
  border-left:4px solid var(--accent);padding-left:var(--s-6);
  font-size:var(--fs-lg);color:var(--ink-800)
}
.reference__quote > :first-child{margin-top:0}
/* The photos students attached are illustrations inside a letter, not hero
   images. Held to a size that reads as "here is a picture I took". */
.reference__quote img{
  max-width:min(100%,26rem);height:auto;
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  margin-block:var(--s-5)
}
.reference__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--ink-100)
}
.reference__date{font-size:var(--fs-sm);color:var(--ink-400)}
.reference__back{
  margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  color:var(--ink);text-decoration:none
}
.reference__back:hover{color:var(--accent-600)}
@media (max-width:38rem){
  .reference__who{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .reference__quote{padding-left:var(--s-4)}
  .reference__back{margin-left:0}
}

/* The rating line ------------------------------------------------------------
   Five filled squares and a sentence, the shape every review badge on the web
   uses, above the headline rather than under the buttons. As a bordered pill
   under the buttons it read as a third button.

   The boxes fill by the score instead of rounding to whole stars: 4,5 is four
   boxes and half of a fifth. `--fill` is set per box in the markup, so the
   gradient stop is the only thing that differs between them. */
.ratingstrip{display:block}
.ratingstrip__link{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem var(--s-3);
  text-decoration:none;color:inherit;font-size:var(--fs-sm);font-weight:600
}
a.ratingstrip__link:hover .ratingstrip__label{text-decoration:underline}
.ratingstrip__boxes{display:inline-flex;gap:3px}
.ratingstrip__box{
  display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) var(--fill,100%),var(--ink-200) var(--fill,100%))
}
.ratingstrip__box .icon{width:1.1rem;height:1.1rem;color:var(--white);fill:currentColor;stroke:none}
.ratingstrip__label{color:var(--ink-600)}

/* In the hero, under the buttons.

   No plate. It had one for about ten minutes and a dark rounded rectangle
   directly under two buttons is a third button, which is exactly the thing that
   moved it above the headline in the first place. What tells it apart from the
   buttons is that it is not shaped like one: five yellow squares and a line of
   text, sitting on the photograph.

   The link is an inline-flex row inside a block that fills the column, so
   `text-align:center` on the hero body does nothing to it: the boxes stayed at
   the left edge under a centred headline. The home hero centres its contents at
   every width, so the row centres with them. */
.ratingstrip--hero{margin-top:var(--s-5);display:flex}
.hero--home .ratingstrip--hero{justify-content:center}
.hero--home .ratingstrip__link{justify-content:center}
.ratingstrip--hero .ratingstrip__link{color:var(--white);font-size:var(--fs-base)}
.ratingstrip--hero .ratingstrip__label{color:rgb(255 255 255/.88)}
.ratingstrip--hero .ratingstrip__box{
  background:linear-gradient(90deg,var(--accent) var(--fill,100%),rgb(255 255 255/.3) var(--fill,100%))
}
.ratingstrip--hero .ratingstrip__box .icon{color:var(--ink)}

@media (max-width:30rem){
  .ratingstrip--hero .ratingstrip__link{font-size:var(--fs-sm)}
  .ratingstrip__box{width:1.4rem;height:1.4rem}
  .ratingstrip__box .icon{width:.95rem;height:.95rem}
}

}

/* Destinations ------------------------------------------------------------- */
.destgrid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.destcard{
  position:relative;display:block;aspect-ratio:3/2;border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;background:var(--ink-100);
  transition:transform var(--t-base),box-shadow var(--t-base)
}
.destcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.destcard__media,.destcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destcard__ph{position:absolute;inset:0;background:linear-gradient(160deg,var(--accent-100),var(--coral-050))}
.destcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(21,23,28,.8))}
.destcard__name{
  position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:1;
  color:var(--white);font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg)
}

/* Events ------------------------------------------------------------------- */
.eventgrid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.eventcard{
  display:flex;gap:var(--s-4);padding:var(--s-5);
  background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-lg);
  transition:border-color var(--t-fast),box-shadow var(--t-base)
}
.eventcard:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.eventcard__date{
  flex:none;width:3.75rem;height:3.75rem;border-radius:var(--r-md);
  background:var(--accent);color:var(--ink);display:grid;place-content:center;text-align:center;line-height:1.1
}
.eventcard__day{font-family:var(--font-head);font-weight:800;font-size:var(--fs-xl)}
.eventcard__month{font-size:var(--fs-xs);text-transform:uppercase;font-weight:600}
.eventcard__body{display:grid;gap:var(--s-2);align-content:start}
.eventcard__title{font-size:var(--fs-lg)}
.eventcard__title a{text-decoration:none}
.eventcard__title a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.eventcard__meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:var(--fs-sm);color:var(--ink-400)}
.eventcard__place.is-online{color:var(--ok);font-weight:600}
.eventcard__cta{font-size:var(--fs-sm);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.eventmeta{font-size:var(--fs-lg);color:var(--ink-600)}

/* Blog cards --------------------------------------------------------------- */
.postgrid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.postcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;gap:var(--s-3)}
.postcard__media{display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--ink-050)}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.postcard__link:hover .postcard__media img{transform:scale(1.04)}
.postcard__body{display:grid;gap:var(--s-2)}
.postcard__cat{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-600)}
.postcard__title{font-size:var(--fs-lg)}
.postcard__link:hover .postcard__title{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.postcard__excerpt{color:var(--ink-600);font-size:var(--fs-sm)}
.postcard__meta{display:flex;gap:.5rem;font-size:var(--fs-xs);color:var(--ink-400)}

/* FAQ ---------------------------------------------------------------------- */
.faq{display:grid;gap:var(--s-2)}
.faq__item{border:1px solid var(--ink-100);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.faq__item[open]{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-lg)
}
.faq__q::-webkit-details-marker{display:none}
.faq__q .icon{flex:none;transition:transform var(--t-base);color:var(--accent-600)}
.faq__item[open] .faq__q .icon{transform:rotate(45deg)}
.faq__a{padding:0 var(--s-5) var(--s-5);color:var(--ink-600)}

/* Price table -------------------------------------------------------------- */
/* Four columns of prices do not fit a phone, so the table scrolls inside its
   own box. The fade on the right edge is the only thing that says so: without
   it a cut-off column reads as a rendering fault. */
.pricetable-wrap{
  overflow-x:auto;border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-card)
}
@media (max-width:40rem){
  .pricetable-wrap{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent)
  }
}
.pricetable{font-size:var(--fs-sm);min-width:560px}
.pricetable th,.pricetable td{padding:var(--s-4);text-align:left;border-bottom:1px solid var(--ink-100)}
.pricetable thead th{background:var(--ink-050);font-family:var(--font-head);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-600)}
.pricetable tbody th{font-weight:600}
.pricetable tbody tr:last-child th,.pricetable tbody tr:last-child td{border-bottom:0}
.pricetable__price{font-family:var(--font-head);font-weight:700;font-size:var(--fs-base);white-space:nowrap}
.pricetable__note{font-size:var(--fs-sm);color:var(--ink-400);margin-top:var(--s-3)}

/* Consultant --------------------------------------------------------------- */
.person{
  display:flex;gap:var(--s-4);align-items:center;
  background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:var(--s-4)
}
.person--light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--white)}
.person--inline{border:0;background:transparent;padding:0}
.person__photo{width:4.5rem;height:4.5rem;border-radius:var(--r-full);overflow:hidden;flex:none;background:var(--accent-100)}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__photo-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--accent-100),var(--coral-050))}
.person__intro{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;opacity:.6}
.person__name{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg)}
.person__role{font-size:var(--fs-sm);opacity:.7}
.person__links{display:grid;gap:.15rem;margin-top:var(--s-2)}
.person__links a{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);text-decoration:none;font-weight:500}
.person__links a:hover{text-decoration:underline}

/* Forms -------------------------------------------------------------------- */
.leadform{
  background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-xl);
  padding:var(--s-6);box-shadow:var(--shadow-md);display:grid;gap:var(--s-5)
}
.leadform--compact{padding:var(--s-5);box-shadow:none}
.leadform--compact .leadform__grid{grid-template-columns:1fr}
.leadform__head{display:grid;gap:var(--s-2)}
.leadform__title{font-size:var(--fs-2xl)}
.leadform--compact .leadform__title{font-size:var(--fs-xl)}
.leadform__lead{color:var(--ink-600);font-size:var(--fs-sm)}
.leadform__grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:560px){.leadform__grid{grid-template-columns:1fr 1fr}}
/* In the narrow sidebar the form stays single-column whatever the viewport,
   otherwise the fields end up 90px wide and unusable. */
.leadform--compact .leadform__grid,
.pagebody__side .leadform__grid,
.guide__side .leadform__grid{grid-template-columns:1fr}
.field{display:grid;gap:.4rem;margin:0}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-800)}
.field label span[aria-hidden]{color:var(--coral)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border:2px solid var(--ink-100);border-radius:var(--r-md);
  background:var(--white);font-size:var(--fs-base);transition:border-color var(--t-fast),box-shadow var(--t-fast)
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-200)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-050)
}
.field textarea{resize:vertical;min-height:7rem}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--err)}
.field__error{font-size:var(--fs-xs);color:var(--err);font-weight:600}
.field--consent{margin:0}
.field--consent label{display:flex;gap:.65rem;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);color:var(--ink-600)}
.field--consent input{width:1.15rem;height:1.15rem;margin-top:.2rem;flex:none;accent-color:var(--accent-600)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.leadform__foot{display:grid;gap:var(--s-3);justify-items:start}
.leadform__foot .btn{width:100%}
@media (min-width:520px){.leadform__foot .btn{width:auto}}
.leadform__note{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);color:var(--ink-400)}
.leadform__status{font-size:var(--fs-sm);font-weight:600}
.leadform__status.is-ok{color:var(--ok)}
.leadform__status.is-err{color:var(--err)}
.leadform.is-sent .leadform__grid,.leadform.is-sent .leadform__foot,.leadform.is-sent .field--consent{display:none}
.leadform.is-sending{opacity:.6;pointer-events:none}

.newsletter{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.newsletter__label{font-size:var(--fs-sm);font-weight:600}
/* The field and the button go under each other when they stop fitting side by
   side. `min-width:0` alone was not enough: it lets the input shrink once the
   row has a width, but the row is inside a grid column whose automatic minimum
   is its own content, and an <input> carries a browser default width of about
   205px. Added to the button, that fixed the footer track at 353px inside a
   328px column on a 360px phone, so the whole footer, every column of it, hung
   off the side of the screen and "Odoberať" was cut in half.
   A basis rather than `flex:1` is what makes the row able to wrap: 12rem is
   wide enough for an e-mail address and narrow enough to stay on one line in
   the footer column on a desktop. */
.newsletter__row{display:flex;flex-wrap:wrap;gap:.5rem}
.newsletter__row input{
  flex:1 1 12rem;min-width:0;padding:.7rem .9rem;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--white)
}
.newsletter__row input::placeholder{color:rgba(255,255,255,.5)}
.newsletter__row input:focus{outline:0;border-color:var(--accent);background:rgba(255,255,255,.14)}
.newsletter__note{font-size:var(--fs-xs);opacity:.55}

.searchform{display:flex;gap:.5rem}
.searchform input{
  flex:1;padding:.85rem 1.1rem;border:2px solid var(--ink-100);border-radius:var(--r-full);font-size:var(--fs-base)
}
.searchform input:focus{outline:0;border-color:var(--accent)}
.searchform button{
  width:3rem;height:3rem;border-radius:var(--r-full);background:var(--accent);color:var(--ink);
  display:grid;place-items:center;flex:none
}

/* -----------------------------------------------------------------------------
   6. Regions
   -------------------------------------------------------------------------- */

/* Header ------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100}
.utilbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:var(--fs-xs)}
.utilbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:38px}
.utilbar__contact{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.utilbar__item{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;transition:color var(--t-fast)}
.utilbar__item:hover{color:var(--accent)}
.utilbar__item em{font-style:normal;opacity:.5;font-size:.9em}
.utilbar__item--wa:hover{color:#25d366}
.utilbar__nav .menu{display:flex;gap:var(--s-4)}
.utilbar__nav a{text-decoration:none}
.utilbar__nav a:hover{color:var(--accent)}
@media (max-width:860px){
  .utilbar__item--hide-sm,.utilbar__nav{display:none}
}

.mainbar{background:var(--white);border-bottom:1px solid var(--ink-100);transition:box-shadow var(--t-base)}
.mainbar.is-stuck{box-shadow:var(--shadow-md)}
.mainbar__inner{display:flex;align-items:center;gap:var(--s-5);min-height:var(--header-h)}

/* The logo does not shrink.
   When the menu grew to seven items with "Jazykové kurzy pre deti a mládež"
   among them, flexbox took the space it needed out of the first item it could:
   .brand collapsed to 0×0 and the logo vanished from the header while still
   sitting in the markup. The nav is the flexible one, not the brand. */
.brand{flex:0 0 auto}
.primary-nav{min-width:0}

/* The header is wider than the text column.
   Seven top-level items, a search button and a CTA do not fit in 1200 px next
   to the logo, and the menu was running underneath the CTA. The content below
   still reads at 1200 px; only the bar itself uses the extra room.

   Widening the bar was not enough on its own. The seven items measure 867px,
   the logo 185 and the search and CTA together 234: the bar needs about
   1310px of room before it holds them side by side, and it was switching out
   of the drawer at 1080. Between those two numbers the menu ran under the CTA
   with "Blog" behind the yellow button, on every 1280px laptop. The drawer now
   stays until the bar really fits, and --nav-bar below is the one number that
   decides it. */
@media (min-width:1200px){
  .mainbar__inner{width:min(100% - 2.5rem,1400px)}
}
.brand__link{display:grid;text-decoration:none;line-height:1.05}
.brand__name{font-family:var(--font-head);font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.brand__dot{color:var(--accent-600)}
.brand__tagline{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-400)}
/* The logo is capped by height, whatever chose it.
   `.custom-logo` is what WordPress prints; `.brand__logo` is what the header
   prints when Nastavenia → Logo has a file. Both need the cap: these are
   4 000px brand assets and without it the header is one giant wordmark. */
.custom-logo,.brand__logo{max-height:44px;width:auto;display:block}

.mainbar__actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.mainbar__actions .btn{display:none}
/* The CTA appears well before the menu bar does, and stays next to the burger.
   It is the conversion element of the header; a 1280px laptop should not lose
   it just because seven menu items need more room than it has. */
@media (min-width:1080px){.mainbar__actions .btn{display:inline-flex}}

.burger{width:44px;height:44px;display:grid;place-content:center;gap:5px;border-radius:var(--r-md)}
.burger span:not(.screen-reader-text){display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-base),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1360px){.burger{display:none}}

.sitesearch{border-top:1px solid var(--ink-100);padding-block:var(--s-4);background:var(--ink-050)}

/* Primary nav + megamenu --------------------------------------------------- */
.menu--primary{display:flex;align-items:center;gap:var(--s-1)}
.menu-item--top > .menu-link{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.6rem .55rem;border-radius:var(--r-md);text-decoration:none;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast)
}
.menu-item--top > .menu-link:hover,.menu-item--top.is-current > .menu-link{background:var(--ink-050)}
.menu-item--top.is-current > .menu-link{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.menu-item.is-cta > .menu-link{background:var(--accent);border-radius:var(--r-full);padding-inline:1.1rem}

@media (min-width:1360px){
  .primary-nav{display:flex;flex:1}
  .menu-toggle{display:none}
  .menu-item--top{position:static}
  .has-mega > .menu-link::after{
    content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.5;margin-left:.15rem
  }
  .mega{
    position:absolute;left:0;right:0;top:100%;
    background:var(--white);border-top:1px solid var(--ink-100);box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t-base),transform var(--t-base),visibility var(--t-base)
  }
  .has-mega:hover > .mega,.has-mega:focus-within > .mega,.has-mega.is-open > .mega{opacity:1;visibility:visible;transform:none}
  .has-mega.is-open > .menu-link{background:var(--ink-050)}
  .has-mega.is-open > .menu-link::after{transform:rotate(-135deg) translateY(-2px)}
  .mega__inner{
    width:min(100% - 2.5rem,1400px);margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);padding-block:var(--s-6)
  }
  /* Countries in a grid, reading left to right, three or four per row
     depending on the width. Not two hand-split columns. */
  /* Four across, capped, so nine countries read as a block rather than as a
     line of text stretched over 1400 px. */
  .mega__list{
    display:grid;gap:.15rem var(--s-3);align-content:start;grid-column:1;
    grid-template-columns:repeat(4,minmax(150px,1fr));max-width:820px
  }
  .primary-nav__mobile-foot{display:none}
}
.mega__list .menu-link{
  display:grid;gap:.1rem;padding:.55rem .75rem;border-radius:var(--r-md);text-decoration:none;
  transition:background var(--t-fast)
}
.mega__list .menu-link:hover{background:var(--accent-050)}
.menu-link__label{font-weight:600;font-size:var(--fs-sm)}
.menu-link__desc{font-size:var(--fs-xs);color:var(--ink-400)}
.mega__list .is-featured .menu-link{background:var(--sand);border:1px solid var(--ink-100)}

/* Country entries: flag, then name, on one line.
   The flag carries a hairline border because four of the sixteen are white at
   the edge and would otherwise bleed into the panel. */
.mega__list .menu-link--country{
  grid-template-columns:auto 1fr;align-items:center;gap:.15rem .6rem
}
.menu-link__flags{display:inline-flex;gap:2px;flex:0 0 auto}
.flag{
  width:24px;height:18px;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(21,23,28,.12)
}
.mega__list .menu-link--country .menu-link__desc{grid-column:2}

/* "Prehľad programu": the way to the landing page now that the top-level item
   opens the panel instead of navigating. Spans the grid so it reads as a
   heading for the countries under it, not as a country. */
.mega__list .is-overview{grid-column:1/-1}
.mega__list .is-overview .menu-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;color:var(--ink);padding-left:.75rem
}
.mega__list .is-overview .menu-link::after{
  content:"";width:.4rem;height:.4rem;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg)
}
.mega__list .is-overview + .menu-item .menu-link{margin-top:.15rem}

.mega__promo{display:grid;gap:var(--s-2);align-content:start;width:300px}
.mega__promo-tag{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-600)}
.mega__promo-card{
  display:grid;gap:.35rem;text-decoration:none;padding:var(--s-3);
  background:var(--sand);border-radius:var(--r-lg);border:1px solid var(--ink-100);
  transition:border-color var(--t-fast)
}
.mega__promo-card:hover{border-color:var(--accent)}
.mega__promo-card img{border-radius:var(--r-md);aspect-ratio:16/9;object-fit:cover;width:100%}
.mega__promo-title{font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm)}
.mega__promo-text{font-size:var(--fs-xs);color:var(--ink-600)}
.mega__promo-more{font-size:var(--fs-xs);font-weight:700;color:var(--ink)}

/* Mobile navigation -------------------------------------------------------- */
@media (max-width:1359.98px){
  .primary-nav{
    position:fixed;inset:calc(var(--header-h) + 38px) 0 0;background:var(--white);
    padding:var(--s-5) 0 var(--s-9);overflow-y:auto;
    transform:translateX(100%);transition:transform var(--t-base);z-index:90
  }
  .primary-nav.is-open{transform:none}
  .menu--primary{flex-direction:column;align-items:stretch;gap:0;width:min(100% - 2rem,var(--wrap));margin-inline:auto}
  .menu-item--top{border-bottom:1px solid var(--ink-100);position:relative}
  .menu-item--top > .menu-link{padding:var(--s-4) 3rem var(--s-4) 0;font-size:var(--fs-lg);display:block}
  .menu-toggle{
    position:absolute;right:0;top:.5rem;width:44px;height:44px;
    display:grid;place-items:center;border-radius:var(--r-md);color:var(--ink-600)
  }
  .menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base)}
  .menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mega{display:none;padding-bottom:var(--s-4)}
  .menu-item--top.is-expanded .mega{display:block}
  .mega__list{display:grid;gap:.1rem;padding-left:var(--s-3);border-left:2px solid var(--accent-100)}
  .mega__list .menu-link--country{grid-template-columns:auto 1fr}
  .mega__promo{display:none}
  .primary-nav__mobile-foot{
    display:grid;gap:var(--s-3);width:min(100% - 2rem,var(--wrap));margin:var(--s-6) auto 0
  }
  .primary-nav__mobile-foot .btn{width:100%}
  .primary-nav__mobile-foot .btn--ghost-light{--btn-bg:var(--ink-050);--btn-fg:var(--ink);--btn-bd:var(--ink-100)}
  body.nav-open{overflow:hidden}
}

/* Breadcrumbs / anchor nav ------------------------------------------------- */
.breadcrumbs{background:var(--ink-050);font-size:var(--fs-xs);border-bottom:1px solid var(--ink-100)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;padding-block:.7rem;color:var(--ink-400)}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:.4rem;opacity:.5}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{color:var(--ink);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--ink-600)}

/* Hero --------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;background:var(--ink);color:var(--white)}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__img--placeholder{background:linear-gradient(135deg,#2b2f3a,#15171c 60%,#3a2f14)}
/* Even, and heavier at the bottom, now that the headline is centred. A
   left-weighted gradient under centred text darkens the wrong half. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(21,23,28,.55) 0%,rgba(21,23,28,.35) 45%,rgba(21,23,28,.8) 100%),
    radial-gradient(120% 80% at 50% 45%,rgba(21,23,28,.45),rgba(21,23,28,.75))
}
.hero__inner{position:relative;display:grid;gap:var(--s-6);padding-block:clamp(3.5rem,2rem + 7vw,7rem)}

/* The homepage hero fits the viewport: one screen, no scrolling to see it
   whole. 100svh minus the sticky header and the utility bar above it. */
.hero--home{--chrome:calc(var(--header-h) + 38px)}
.hero--home .hero__inner{
  min-height:calc(100svh - var(--chrome));
  max-height:900px;
  align-content:center;
  padding-block:var(--s-8)
}
@supports not (height:100svh){.hero--home .hero__inner{min-height:calc(100vh - var(--chrome))}}
@media (max-height:620px){.hero--home .hero__inner{min-height:0;padding-block:var(--s-8)}}
.hero__body{max-width:640px;display:grid;gap:var(--s-4);justify-items:start}
/* Centred. The left-aligned body sat against a photograph whose subject is in
   the middle of the frame, so the headline fought the picture instead of
   sitting on it. */
.hero--home .hero__body{
  max-width:min(100%,820px);margin-inline:auto;
  text-align:center;justify-items:center
}
.hero--home .hero__title{max-width:18ch;margin-inline:auto}
.hero--home .hero__text{margin-inline:auto}
.hero--home .hero__trust{justify-content:center}
@media (min-width:1000px){.hero--home .hero__inner{max-width:var(--wrap)}}
.hero__eyebrow{
  font-family:var(--font-head);font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;
  color:var(--accent);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:rgba(255,199,0,.12);border:1px solid rgba(255,199,0,.3);
  padding:.4rem .9rem;border-radius:var(--r-full);max-width:100%
}
@media (max-width:420px){.hero__eyebrow{white-space:normal}}
.hero__title{font-size:var(--fs-4xl);font-weight:800;max-width:16ch}
/* The interior banner: centred, light, led by the flag.
   The full-bleed photograph with a scrim over it is what made every product
   and country page read as a magazine article. The country identifies the
   page faster than any picture does, so the flag goes first and the photograph
   moves below the text as a contained strip.

   An interior page is also not a landing page. The home hero earns its height
   by being the whole pitch; on a subpage the same padding pushed the first
   heading to 789px on a 1440x900 screen. */
.hero--page{background:var(--sand);color:var(--ink)}
.hero--page .hero__inner{padding-block:clamp(2rem,1.2rem + 2.6vw,3.25rem);gap:0}
.hero--page .hero__body{
  max-width:720px;margin-inline:auto;text-align:center;
  justify-items:center;gap:var(--s-3)
}
.hero--page .hero__title{font-size:var(--fs-3xl);max-width:20ch;margin-inline:auto}
.hero--page .hero__text{color:var(--ink-600);max-width:56ch;margin-inline:auto}
.hero--page .hero__eyebrow{
  background:var(--white);border-color:var(--ink-100);color:var(--ink-600);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em
}
.hero--page .hero__actions{margin-top:var(--s-2)}
.hero__flags{display:inline-flex;gap:var(--s-2);margin-bottom:var(--s-1)}
.flag--xl{width:56px;height:42px;border-radius:6px;box-shadow:0 2px 10px rgba(21,23,28,.18)}

/* The photograph is the background of the banner, and the banner stays short.
   As a strip under the text it was honest and expensive: band plus strip came
   to 836px on a school profile, and the fact bar under it put the first real
   word at 1 252px.

   Behind the text it costs nothing extra, so the whole banner is about 360px.
   What keeps it from reading as a magazine feature is not the absence of a
   photograph, it is the height and the furniture: the flag, the programme pill
   and the yellow button are product-page things and an article has none of
   them. */
.hero--page.has-photo{background:var(--ink);color:var(--white)}
.hero--page.has-photo .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero--page.has-photo .hero__photo{width:100%;height:100%;object-fit:cover;display:block}
/* Dark enough to carry white text over any photograph, and heaviest in the
   middle where the headline sits rather than at one edge. */
.hero--page.has-photo .hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(15 23 32/.72) 0%,rgb(15 23 32/.62) 45%,rgb(15 23 32/.78) 100%)
}
.hero--page.has-photo .hero__inner{position:relative;z-index:1}
.hero--page.has-photo .hero__title{color:var(--white)}
.hero--page.has-photo .hero__text{color:rgb(255 255 255/.85)}
.hero--page.has-photo .hero__eyebrow{
  background:rgb(255 255 255/.14);border-color:rgb(255 255 255/.28);color:var(--white)
}
@media (max-width:700px){
  .flag--xl{width:44px;height:33px}
}
.hero__text{font-size:var(--fs-lg);color:rgba(255,255,255,.8);max-width:52ch}
/* On a phone the two buttons wrapped onto two lines and kept their own widths,
   so "Konzultácia zdarma" and "Pozrieť programy" sat under each other ragged
   and off-centre under centred text. Full width is also the easier target for
   a thumb. Same shape as .leadform__foot, which solved this already. */
.hero__actions{display:grid;gap:var(--s-3);margin-top:var(--s-2);width:100%}
.hero__actions .btn{width:100%}
@media (min-width:520px){
  .hero__actions{display:flex;flex-wrap:wrap;width:auto}
  .hero__actions .btn{width:auto}
}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.hero__trust li{display:inline-flex;align-items:center;gap:.4rem}
.hero__trust .icon{color:var(--accent)}
.hero__video{
  display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--white);
  font-weight:600;font-size:var(--fs-sm)
}
.hero__video .icon{
  width:3rem;height:3rem;padding:.75rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink);fill:currentColor;stroke:none
}
/* `.has-media` belonged to the old scrimmed-background banner and is gone from
   the page hero markup; only the homepage still uses hero__media. */

/* Footer ------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);margin-top:var(--section-y)}
/* No margin when the footer follows a full-bleed band. The yellow CTA runs
   edge to edge and the footer is black; --section-y of white between them read
   as a hole in the page rather than as breathing room. */
.ctafinal + .site-footer,.section--partners + .site-footer{margin-top:0}
.footer__grid{display:grid;gap:var(--s-7) var(--s-6);padding-block:var(--s-9);grid-template-columns:1fr}
/* A grid column may be narrower than the widest thing in it. Without this the
   track grows to fit its content instead, and one wide child, here the
   newsletter field, widens the column, the grid and the page with it. */
.footer__col{min-width:0}
@media (min-width:600px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  /* brand | programy | destinácie | o nás | kontakt */
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:var(--s-6)}
}
.footer__col--brand{max-width:36ch}
@media (min-width:600px) and (max-width:899.98px){
  .footer__col--brand,.footer__col--contact{grid-column:span 2}
}
.brand__link--footer{color:var(--white);margin-bottom:var(--s-4);display:inline-block}
/* No white plate under it any more.
   The plate existed because the footer had to show the same dark artwork as
   the header, and dark on near-black is invisible. Now the footer has its own
   slot in Nastavenia → Logo and takes the white variant, so the plate turned
   the logo into a white rectangle with a white wordmark inside it. Whoever
   picks the file picks one that suits a dark background; the CSS should not
   second-guess that. */
.brand__logo--footer{max-width:210px;height:auto;display:block}
.brand__link--footer .brand__tagline{color:rgba(255,255,255,.45)}
.footer__blurb{font-size:var(--fs-sm);line-height:1.6}
.footer__social{display:flex;gap:.5rem;margin-top:var(--s-4)}
.footer__social a{
  width:2.5rem;height:2.5rem;border-radius:var(--r-full);display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:background var(--t-fast),color var(--t-fast)
}
.footer__social a:hover{background:var(--accent);color:var(--ink)}
.footer__title{font-family:var(--font-head);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--white);margin-bottom:var(--s-4)}
.menu--footer{display:grid;gap:.55rem;font-size:var(--fs-sm)}
.menu--footer a{text-decoration:none;transition:color var(--t-fast)}
.menu--footer a:hover{color:var(--accent)}
.footer__address{font-style:normal;font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.footer__contact-line{display:block;font-size:var(--fs-sm);text-decoration:none;font-weight:500;color:var(--white)}
.footer__contact-line:hover{color:var(--accent)}

.footer__accreditations{border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s-5)}
.footer__accreditations .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}
.footer__accr-label{font-size:var(--fs-xs);color:rgba(255,255,255,.45)}
.footer__accr-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.footer__accr-logo{
  max-height:30px;width:auto;display:block;
  background:var(--white);border-radius:var(--r-sm);
  padding:.35rem .5rem
}
.footer__accr-placeholder{font-size:var(--fs-xs);letter-spacing:.1em;color:rgba(255,255,255,.35);font-weight:600}

/* Zivy odznak ICEF. Skript ICEF mu davá inline width:120px, preto width:auto
   s !important, inak by sa pri obmedzenej vyske roztiahol do sirky. Biela
   podlozka je ta ista ako pri ostatnych logach, odznak je tmavy ako paticka. */
.footer__accr-badge img{
  max-height:72px;width:auto!important;display:block;
  background:var(--white);border-radius:var(--r-sm);
  padding:.35rem .5rem
}

.footer__legal{border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs)}
.footer__legal-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-4);color:rgba(255,255,255,.45)}
/* The agency credit sits between the copyright and the legal links, quieter
   than both: it is a signature, not a claim on the page. */
.footer__author a{color:rgba(255,255,255,.7);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.footer__author a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.menu--legal{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.menu--legal a{text-decoration:none}
.menu--legal a:hover{color:var(--accent)}

/* Final CTA band ----------------------------------------------------------- */
.ctafinal{background:var(--accent);color:var(--ink)}
/* Every CTA band shares one measure. Mixing .wrap and .wrap--narrow made the
   yellow "Konzultácia zdarma" blocks noticeably different widths page to page. */
.ctafinal .wrap,.section--leadblock .wrap,.section--deepguide .wrap{
  width:min(100% - 2.5rem,var(--wrap))
}
@media (max-width:640px){
  .ctafinal .wrap,.section--leadblock .wrap,.section--deepguide .wrap{width:min(100% - 2rem,var(--wrap))}
}
/* Centred. Split left and right it was a headline on one side of a yellow band
   and a portrait on the other, with a stripe of empty yellow between them. */
.ctafinal__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-6);padding-block:var(--s-8)
}
.ctafinal__text{display:grid;justify-items:center;gap:var(--s-3);max-width:52ch}
.ctafinal__actions{justify-content:center}
.ctafinal__phones{justify-content:center}
.ctafinal__title{font-size:var(--fs-3xl)}
.ctafinal__lead{font-size:var(--fs-lg);color:rgba(21,23,28,.75)}
.ctafinal__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.ctafinal .btn--primary{--btn-bg:var(--ink);--btn-fg:var(--white);--btn-bd:var(--ink)}
.ctafinal .btn--primary:hover{--btn-bg:var(--ink-800);--btn-bd:var(--ink-800)}
.ctafinal .btn--ghost-light{--btn-bg:transparent;--btn-bd:rgba(21,23,28,.35);--btn-fg:var(--ink)}
.ctafinal .btn--ghost-light:hover{--btn-bg:var(--ink);--btn-fg:var(--white);--btn-bd:var(--ink)}
.ctafinal .person--light{background:rgba(255,255,255,.5);border-color:rgba(21,23,28,.1);color:var(--ink)}

/* Intro lede + deep guide link -------------------------------------------- */
.lede{font-size:var(--fs-lg);color:var(--ink);font-weight:500}

.section--deepguide{padding-block:var(--s-7)}
.deepguide{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);
  background:var(--sand);border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:var(--s-6)
}
.deepguide__text{flex:1;min-width:260px}
.deepguide__label{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-400);margin-bottom:.35rem
}
.deepguide__title{font-size:var(--fs-xl);margin-bottom:.4rem}
.deepguide__note{font-size:var(--fs-sm);color:var(--ink-600);max-width:60ch}

/* Partner logos ------------------------------------------------------------ */
.partners{padding-block:var(--s-8);border-top:1px solid var(--ink-100);background:var(--white)}
.partners__label{
  text-align:center;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:var(--s-5)
}
.partners__list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-5) var(--s-7)
}
.partners__logo{
  max-height:80px;max-width:180px;width:auto;
  /* Grey by default so a wall of competing brand colours does not fight the
     page; full colour on hover keeps them legible when someone looks. */
  filter:grayscale(1);opacity:.55;transition:filter var(--t-base),opacity var(--t-base)
}
.partners__item:hover .partners__logo{filter:none;opacity:1}
@media (max-width:640px){.partners__logo{max-height:56px;max-width:130px}}

/* WhatsApp bubble ---------------------------------------------------------- */
.wa-bubble{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;
  width:3.5rem;height:3.5rem;border-radius:var(--r-full);
  display:grid;place-items:center;background:#25d366;color:#fff;
  box-shadow:var(--shadow-lg);transition:transform var(--t-fast)
}
.wa-bubble:hover{transform:scale(1.06)}
@media print{.wa-bubble{display:none}}

/* -----------------------------------------------------------------------------
   7. Template-specific
   -------------------------------------------------------------------------- */

.pagebody{padding-block:var(--section-y)}
/* --section-y is the rhythm between two full sections, and between the hero
   band and the text right under it that is too much: 96px of nothing at the
   exact point the reader is looking for the first sentence. The hero already
   separates itself with its own background. */
.hero + .pagebody,
.hero + .guide,
.hero + .section,
.hero + .railpage,
.section--factbar + .railpage{padding-top:var(--s-7)}

/* The gap between two bands is paid once, by one of them.
 *
 * Every band carried 96px top and 96px bottom, so any two in a row put 192px
 * between them - and where both were white, that was 192px of identical
 * nothing between a school card and the sentence about it. Two rules, and
 * between them every seam on the site is 96px:
 *
 *   - two bands with no ground of their own: the second one drops its top;
 *   - a band that does have a ground (sand form, black reviews, yellow CTA) is
 *     separated by the colour change and keeps its own padding, so the plain
 *     band in front of it halves its bottom. Not zero: the last thing in a
 *     profile column is a photograph or a map, and at zero it sat flush on the
 *     edge of the sand band with no air at all.
 */
:is(.section--profiles,.section--cities,.section--courses,.section--hub,.section--countries) + .railpage,
:is(.section--profiles,.section--cities,.section--courses) + .section--hub,
.railpage + :is(.section--related,.section--children){padding-top:0}

:is(.railpage,.section--profiles,.section--cities,.section--courses,.section--hub,.section--related,.section--children):has(
  + :is(.section--form,.section--refs,.section--faq,.section--prices,.section--offer)
){padding-bottom:var(--s-8)}
.pagebody__grid{display:grid;gap:var(--s-8)}
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   widest child. One wide table inside an article was enough to push the whole
   page sideways on a phone. */
.pagebody__grid > *,.guide__grid > *{min-width:0}
@media (min-width:1000px){
  .pagebody__grid{grid-template-columns:minmax(0,1fr) 330px}
  .pagebody__grid--narrow{grid-template-columns:minmax(0,1fr);max-width:var(--wrap-narrow)}
  .pagebody__grid--narrow .pagebody__side{display:none}
}
.pagebody__main{max-width:72ch;min-width:0}
.pagebody__side{display:grid;gap:var(--s-4);align-content:start}
/* The form follows the reader down.
   `position:sticky` on the column only works while the column is shorter than
   the article beside it; on a long page it scrolled away with everything else.
   Sticking the last child instead keeps the form on screen for the whole
   article, which is the one element on the page that has to be reachable at
   the moment somebody decides. */
@media (min-width:1000px){
  /* The column stretches to the height of the article beside it - that is the
     grid default and it is what gives the sticky card room to travel. Sticking
     the whole column instead only worked while the column was shorter than the
     article; with the consultant card above the form it was not, so the form
     scrolled away exactly when the reader had finished reading and was ready
     to fill it in. */
  .pagebody__side > .sidecta{position:sticky;top:calc(var(--header-total,var(--header-h)) + var(--s-4))}
  /* With the section nav on screen too, the form has to clear that as well. */
  .anchornav ~ .pagebody .pagebody__side > .sidecta{top:calc(var(--header-total,var(--header-h)) + 3.4rem)}
}

.guide{padding-block:var(--section-y)}
.guide__grid{display:grid;gap:var(--s-7)}
/* One column when the page is short: no empty contents rail, no form squeezed
   into a 300px column beside two paragraphs. */
.guide--brief .guide__grid{grid-template-columns:minmax(0,1fr);max-width:var(--wrap-narrow);margin-inline:auto}
.guide--brief .guide__main{max-width:none}

@media (min-width:1100px){
  .guide--full .guide__grid{grid-template-columns:240px minmax(0,1fr) 300px}
  .guide--full .guide__toc{position:sticky;top:calc(var(--header-h) + var(--s-4));align-self:start;max-height:80vh;overflow-y:auto}
  .guide--full .guide__side{position:sticky;top:calc(var(--header-h) + var(--s-4));align-self:start}
}
@media (max-width:1099.98px){.guide__toc{display:none}}
.guide__toc-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);margin-bottom:var(--s-3)}
.guide__toc ol{display:grid;gap:.1rem;border-left:2px solid var(--ink-100)}
.guide__toc a{
  display:block;padding:.4rem .85rem;font-size:var(--fs-sm);color:var(--ink-600);
  text-decoration:none;border-left:2px solid transparent;margin-left:-2px
}
.guide__toc a:hover{color:var(--ink)}
.guide__toc a.is-active{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
.guide__main{max-width:72ch;min-width:0}
.guide__side{display:grid;gap:var(--s-4);align-content:start}
.sidecta{position:relative}

.leadblock{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:960px){.leadblock{grid-template-columns:1fr 1fr}}
.leadblock__title{font-size:var(--fs-3xl)}
.leadblock__lead{font-size:var(--fs-lg);color:var(--ink-600);margin-block:var(--s-4)}
.section--leadblock{background:var(--sand)}

.convert{padding-block:var(--section-y)}
.convert__grid{display:grid;gap:var(--s-8)}
@media (min-width:960px){.convert__grid{grid-template-columns:1fr minmax(0,480px)}}
.convert__title{font-size:var(--fs-4xl)}
.convert__intro{margin-block:var(--s-4)}
.convert__promises{display:grid;gap:var(--s-3);margin-block:var(--s-6)}
.convert__promises li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-800)}
.convert__promises .icon{color:var(--ok);margin-top:.3rem;flex:none}
.convert .refcard{margin-top:var(--s-6);background:var(--white);border:1px solid var(--ink-100);color:var(--ink)}

.contactgrid{display:grid;gap:var(--s-8)}
@media (min-width:960px){.contactgrid{grid-template-columns:1fr minmax(0,440px)}}
.offices{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--s-7)}
.office{background:var(--sand);border-radius:var(--r-lg);padding:var(--s-5);display:grid;gap:.35rem;align-content:start}
.office__city{font-size:var(--fs-lg)}
.office__addr{font-style:normal;color:var(--ink-600);font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.office__line{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);text-decoration:none;font-weight:500}
.office__hours{font-size:var(--fs-xs);color:var(--ink-400);margin-top:var(--s-2)}
.office__map{font-size:var(--fs-sm);font-weight:600;margin-top:var(--s-2)}

.filters{display:grid;gap:var(--s-4);margin-bottom:var(--s-7);padding-bottom:var(--s-5);border-bottom:1px solid var(--ink-100)}
.filters__group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.filters__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-400);min-width:5rem}
.filters__list{display:flex;flex-wrap:wrap;gap:.4rem}

.offergroup + .offergroup{margin-top:var(--s-8)}
.offergroup__title{font-size:var(--fs-2xl);margin-bottom:var(--s-5);padding-bottom:var(--s-3);border-bottom:2px solid var(--accent)}

.post-single__head{padding-block:var(--s-8) var(--s-5);text-align:center}
.post-single__cat{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-600);text-decoration:none;margin-bottom:var(--s-3)
}
.post-single__title{font-size:var(--fs-4xl);margin-bottom:var(--s-3)}
.post-single__meta{display:flex;justify-content:center;gap:.5rem;font-size:var(--fs-sm);color:var(--ink-400)}
.post-single__hero{margin:0 0 var(--s-8);max-width:1100px;margin-inline:auto;padding-inline:1.25rem}
.post-single__hero img{border-radius:var(--r-xl);width:100%}

.results{display:grid;gap:var(--s-5)}
.result{padding-bottom:var(--s-5);border-bottom:1px solid var(--ink-100)}
.result__title{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg);text-decoration:none}
.result__title:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.result__excerpt{color:var(--ink-600);font-size:var(--fs-sm);margin-block:.35rem}
.result__url{font-size:var(--fs-xs);color:var(--ok)}

.section--404{text-align:center;padding-block:var(--s-10)}
.section--404 .searchform{max-width:480px;margin:var(--s-6) auto}
.section--404 .cardgrid{margin-top:var(--s-6)}

/* Pagination --------------------------------------------------------------- */
.pagination,.wp-block-query-pagination{margin-top:var(--s-8)}
.page-numbers{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center}
.page-numbers li a,.page-numbers li span{
  display:grid;place-items:center;min-width:2.6rem;height:2.6rem;padding-inline:.6rem;
  border-radius:var(--r-md);text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  border:1px solid var(--ink-100);background:var(--white)
}
.page-numbers li a:hover{border-color:var(--ink)}
.page-numbers li .current{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* Tabs ------------------------------------------------------------------------
   Every L4 blueprint in the roadmap folds its detail into tabs. Until main.js
   marks the block ready the strip is not drawn and every panel is open, so a
   reader without JavaScript gets a long page rather than an empty one. */

/* The tab strip follows the reader down.
   A profile is five panels of detail and the strip is the only way between
   them; scrolling to the bottom of Ubytovanie and having to scroll back up to
   reach Cena is the thing tabs were supposed to solve. It sticks under the
   header, and `--header-total` is measured by main.js because the utility bar
   is not always there.

   The background is opaque and the strip carries its own bottom border: over
   scrolling body text a transparent bar is unreadable within one line. */
.tabs--ready .tabs__nav{
  position:sticky;top:var(--header-total,var(--header-h));z-index:30;
  background:var(--white);
  /* Cover the panel text sliding under it at the rounded corners of the
     column, and reach the full width of the article rather than stopping at
     the padding. */
  margin-inline:calc(var(--s-1) * -1);padding-inline:var(--s-1)
}
.tabs__panel{scroll-margin-top:calc(var(--header-total,var(--header-h)) + 3.6rem)}

.tabs__nav{display:none}
.tabs--ready .tabs__nav{
  display:flex;gap:var(--s-1);flex-wrap:wrap;
  border-bottom:1px solid var(--ink-100);margin-bottom:var(--s-6)
}
.tabs__tab{
  appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink-600);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-sm) var(--r-sm) 0 0;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)
}
.tabs__tab:hover{color:var(--ink);background:var(--ink-050)}
.tabs__tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs__tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.tabs__panel + .tabs__panel{margin-top:var(--s-7)}
.tabs__panel:focus{outline:none}
.tabs--ready .tabs__panel + .tabs__panel{margin-top:0}
.tabs--ready .tabs__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tabs__heading{font-family:var(--font-head);font-size:var(--fs-xl);margin-bottom:var(--s-3)}

@media (max-width:32rem){
  .tabs--ready .tabs__nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs--ready .tabs__nav::-webkit-scrollbar{display:none}
  .tabs__tab{white-space:nowrap}
}

/* Video: a poster and a play button, not a player ------------------------------
   An embedded YouTube player is around 900 kB and sets third-party cookies on
   every page view, on a tab most visitors never open. The real player arrives
   on the click, in the same overlay the gallery uses. */
.videocard{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);background:var(--ink-800);
  text-decoration:none;color:var(--white)
}
.videocard__img{width:100%;height:100%;object-fit:cover;display:block}
.videocard__scrim{position:absolute;inset:0;background:rgb(15 23 32/.35)}
.videocard__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:5rem;height:5rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink);
  box-shadow:var(--shadow-lg);transition:transform var(--t-base)
}
.videocard:hover .videocard__play{transform:translate(-50%,-50%) scale(1.08)}
.videocard__note{
  position:absolute;left:var(--s-4);bottom:var(--s-4);
  font-size:var(--fs-xs);color:rgb(255 255 255/.8)
}
@media (prefers-reduced-motion:reduce){
  .videocard:hover .videocard__play{transform:translate(-50%,-50%)}
}

/* The gallery inside a tab has no section wrapper of its own. */
.tabs__body > .gallery{margin:0}


/* Supporting links under a product landing.
   Small, quiet, and clearly not offers. */
.section--sublinks{padding-block:0}
.sublinks{
  list-style:none;margin:0;padding:var(--s-5) 0 0;
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  border-top:1px solid var(--ink-100)
}
.sublinks a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--ink-600);
  transition:color var(--t-fast)
}
.sublinks a:hover{color:var(--ink)}
.sublinks .icon{width:.9em;height:.9em;color:var(--ink-200);transition:transform var(--t-fast)}
.sublinks a:hover .icon{transform:translateX(3px);color:var(--ink)}

/* Country signpost, popular programmes, course cards ---------------------------
   These three share one shape: a flag, a name, a number, an arrow. They were
   lost in an earlier edit to this file and every one of them fell back to
   unstyled inline markup, which is why the homepage block looked like a list
   of links. */

.countrygrid,.popgrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
.countrygrid__item,.popgrid__item{margin:0}

.countrytile,.poptile{
  display:flex;align-items:center;gap:var(--s-4);height:100%;
  padding:var(--s-4) var(--s-5);text-decoration:none;color:inherit;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),transform var(--t-base)
}
.countrytile:hover,.poptile:hover{
  border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)
}
.countrytile__flag,.poptile__flag{display:inline-flex;gap:3px;flex:0 0 auto}
.flag--lg{width:40px;height:30px;border-radius:4px}
.countrytile__body,.poptile__body{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.countrytile__name{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg);line-height:var(--lh-snug)}
.countrytile__count,.poptile__count{font-size:var(--fs-sm);color:var(--ink-400)}
.countrytile__arrow,.poptile__arrow{flex:0 0 auto;color:var(--ink-200);transition:color var(--t-fast),transform var(--t-fast)}
.countrytile:hover .countrytile__arrow,.poptile:hover .poptile__arrow{color:var(--ink);transform:translateX(3px)}
.poptile__product{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-400)}
.poptile__title{font-family:var(--font-head);font-weight:700;font-size:var(--fs-base);line-height:var(--lh-snug)}

/* The photograph version of a country tile.
   A flag is a symbol the reader decodes; a photograph of the place is the thing
   being sold, and this block is where somebody decides which country they want.
   The flag survives as a badge because nine coastlines look alike at this size
   and it is what lets a reader find the one country they came for.

   The tile keeps its two-line body, so a country with no picture falls back to
   the flag row above without a second set of rules. Nothing here is allowed to
   produce a grey rectangle: no photo means no `--photo` class. */
/* Three across on a desktop, not four.
   Nine countries in four columns is 4+4+1 and the ninth stands on its own
   line, the same way the fifth product tile did. Three columns fit the nine
   exactly, and a 380px tile is what "väčšia mozaika" means: at 291px the
   photograph was still a thumbnail. `auto-fit` keeps it honest for the
   programmes with two or five countries. */
.countrygrid:has(.countrytile--photo),
.popgrid:has(.poptile--photo){grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
@media (min-width:64rem){
  .countrygrid:has(.countrytile--photo){grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
  /* Six across two rows of three. Eight in four columns made the first offer
     on the homepage the smallest thing on it. */
  .popgrid:has(.poptile--photo){grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
}
/* The photograph version of both signposts: the country grid on a product
   landing page and the popular programmes on the homepage.

   A white card built out of a photograph and a line of text, not a photograph
   with text written on top of it. A scrim dark enough to carry white type over
   any photograph is a scrim dark enough to flatten the photograph, and both
   blocks exist to make somebody want a place. So the picture keeps the whole of
   its own rectangle and the words get a white strip underneath.

   Badges stay on the picture, in the top left corner. A badge in the corner of
   a photograph is a label; the same badge above the name on the white strip is
   a second line of text, and the strip carries one thing. */
.countrytile--photo,.poptile--photo{
  position:relative;display:flex;flex-direction:column;align-items:stretch;
  gap:0;padding:0;overflow:hidden;
  background:var(--white);color:inherit;border-color:transparent
}
.countrytile__media,.poptile__media{
  display:block;position:relative;background:var(--ink-100);
  /* A wider crop where the grid is one column. Nine 4:3 pictures stacked is a
     lot of scrolling for a block the reader has to get through before anything
     else; 16:10 takes several hundred pixels off it and a landscape photograph
     loses nothing by being cropped wide. */
  aspect-ratio:16/10
}
@media (min-width:40rem){
  .countrytile__media,.poptile__media{aspect-ratio:4/3}
}
.countrytile__img,.poptile__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow)
}
.countrytile--photo:hover .countrytile__img,
.poptile--photo:hover .poptile__img{transform:scale(1.04)}

.countrytile--photo .countrytile__body,
.poptile--photo .poptile__body{
  flex:1;justify-content:center;gap:.15rem;
  /* Room on the right for the arrow, which sits in the corner of the strip. */
  padding:var(--s-4) 3rem var(--s-4) var(--s-5)
}
.countrytile--photo .countrytile__name,
.poptile--photo .poptile__title{font-size:var(--fs-xl)}
.countrytile--photo .countrytile__count{color:var(--ink-400)}
.countrytile--photo .countrytile__arrow,
.poptile--photo .poptile__arrow{
  position:absolute;right:var(--s-5);bottom:calc(var(--s-4) + .1rem)
}

/* The badges, in the corner of the picture. */
.countrytile--photo .countrytile__tag,
.poptile--photo .poptile__tag{
  position:absolute;z-index:1;top:var(--s-3);left:var(--s-3);
  font-size:var(--fs-xs);font-weight:700;
  padding:.25rem .7rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink);
  box-shadow:0 1px 6px rgb(0 0 0/.25)
}
/* A tile that leaves the site says so quietly: it is a fact, not an offer. */
.countrytile--photo .countrytile__tag--external{
  background:rgb(255 255 255/.92);color:var(--ink-600);font-weight:600
}

.countrytile--photo:hover,.poptile--photo:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.countrytile--photo:focus-visible,
.poptile--photo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .countrytile--photo:hover .countrytile__img,
  .poptile--photo:hover .poptile__img{transform:none}
}

/* Course card: no photograph, because the migration gave every page in a
   country the same stock beach and five of them in a row said nothing. */
.cardgrid--courses{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.coursecard{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),transform var(--t-base)
}
.coursecard:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.coursecard__link{display:flex;flex-direction:column;gap:var(--s-2);height:100%;padding:var(--s-5);text-decoration:none;color:inherit}
.coursecard__title{font-family:var(--font-head);font-size:var(--fs-lg);line-height:var(--lh-snug);margin:0}
.coursecard__note{font-size:var(--fs-sm);color:var(--ink-600)}
.coursecard__facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.coursecard__fact{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-600);
  background:var(--ink-050);border-radius:var(--r-full);padding:.2rem .6rem
}
.coursecard__more{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:600;margin-top:auto;padding-top:var(--s-4)}

/* Profile card -----------------------------------------------------------------
   The photograph leads. At 76px beside a text row a campus was a grey smudge
   and every one of seventeen districts looked like every other, which is the
   whole problem: this is where somebody picks the place they will live for a
   year. So a 16:10 photograph across the top, four across on a desktop.

   Every image is `cover` inside a fixed box, so one portrait shot cannot make
   its card taller than its neighbours and the mosaic stays level. */

.profilelist{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))
}
/* One or two schools keep the card width the other lists use instead of being
   stretched across the full row. Left-aligned, like every other card grid on
   the site: a lone centred card under a left-aligned heading reads as a
   different component. */
.profilelist:not(:has(.profilecard:nth-child(3))){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),18rem));
  justify-content:start
}
@media (min-width:64rem){
  .profilelist{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
}
.profilecard{
  background:var(--white);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),transform var(--t-base)
}
.profilecard:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.profilecard__link{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;height:100%
}
.profilecard__media{
  display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-050)
}
.profilecard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow)}
.profilecard:hover .profilecard__img{transform:scale(1.04)}
.profilecard__mono{
  display:grid;place-items:center;width:100%;height:100%;
  background:var(--accent-100);color:var(--ink);
  font-family:var(--font-head);font-weight:800;font-size:2.5rem
}
.profilecard__body{
  display:flex;flex-direction:column;gap:.35rem;min-width:0;
  padding:var(--s-4) var(--s-4) var(--s-5)
}
.profilecard__title{
  font-family:var(--font-head);font-size:var(--fs-base);font-weight:700;
  line-height:var(--lh-snug);margin:0
}
.profilecard__city{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-600)
}
.profilecard__city .icon{width:1em;height:1em;flex:0 0 auto;color:var(--ink-400)}
.profilecard__meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.profilecard__fact{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-600);
  background:var(--ink-050);border-radius:var(--r-full);padding:.2rem .6rem
}

@media (prefers-reduced-motion:reduce){
  .profilecard:hover{transform:none}
  .profilecard:hover .profilecard__img{transform:none}
}

/* Where a profile is, in its sidebar.
   It was printing raw next to the contact card, unstyled, and ran out of the
   column. */
.pagebody__where{
  display:flex;align-items:center;gap:.45rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-600);
  background:var(--sand);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)
}
.pagebody__where .icon{width:1.1em;height:1.1em;flex:0 0 auto;color:var(--ink-400)}

/* Admission conditions --------------------------------------------------------
   First thing an applicant needs to know is whether they qualify, so it is a
   plain list of pairs and not the fourth tab. */

.admission{background:var(--sand);border-radius:var(--r-lg);padding:var(--s-6);margin-block:var(--s-7)}
.admission__title{font-family:var(--font-head);font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.admission__list{display:grid;gap:0}
.admission__row{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--ink-100)}
.admission__row:first-child{border-top:0}
.admission__row dt{flex:0 0 12rem;font-weight:600}
.admission__row dd{flex:1;margin:0;color:var(--ink-600)}

/* Reasons ---------------------------------------------------------------------
   Numbered because a reader skimming ten reasons wants to know how many are
   left. */

.reasons{list-style:none;counter-reset:reason;display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));padding:0;margin:0}
.reasons__item{counter-increment:reason;position:relative;padding-left:3.25rem}
.reasons__item::before{
  content:counter(reason);position:absolute;left:0;top:0;
  width:2.25rem;height:2.25rem;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:var(--accent-100);color:var(--ink);
  font-family:var(--font-head);font-weight:700
}
.reasons__title{font-family:var(--font-head);font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.reasons__text{color:var(--ink-600);font-size:var(--fs-sm)}

/* Audience points -------------------------------------------------------------
   The student and the parent tabs share one list style. */

.usps--audience{list-style:none;display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:0;margin:0}
.usps__item{display:flex;gap:var(--s-3)}
.usps__icon{flex:0 0 auto;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-full);background:var(--accent-050);color:var(--ink)}
.usps__body{display:flex;flex-direction:column;gap:var(--s-1)}
.usps__title{font-family:var(--font-head);font-size:var(--fs-base)}
.usps__text{font-size:var(--fs-sm);color:var(--ink-600)}

/* Gallery ---------------------------------------------------------------------
   Last on the page. Nobody opens a school profile to look at the building. */

/* Every photograph in its own proportions.
   A grid of equal cells needs `object-fit:cover`, and cover crops: a portrait
   shot of a dormitory came out as a slice of its middle and a wide shot of a
   campus lost both ends. These are photographs of specific buildings and
   rooms, and the framing is the whole of what they say.

   Columns rather than grid, so the images can be different heights without
   leaving a row of gaps under the shortest one. `columns` takes a width and
   fits as many as it can, which is the same responsive behaviour the grid had. */
/* Square corners and bigger tiles. Rounded thumbnails made the block look like
   a row of app icons; a photograph of a campus is a photograph, and the frame
   should be the picture's own edge. */
.gallery{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-2);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))
}
.gallery__item{margin:0;min-width:0}
.gallery__link,.gallery__item > img{
  display:block;position:relative;overflow:hidden;
  border-radius:0;aspect-ratio:4/3;background:var(--ink-050);
  transition:transform var(--t-base),box-shadow var(--t-base)
}
.gallery__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow)}
.gallery__link:hover{box-shadow:var(--shadow-lift);z-index:1}
.gallery__link:hover .gallery__img{transform:scale(1.06)}
.gallery__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* The first tile takes two columns and two rows, so the block has a shape
   instead of a rhythm. Only from three pictures up: with two, the feature tile
   and one small one beside it is not a mosaic, it is a mistake. */
@media (min-width:44rem){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
  .gallery--feature > .gallery__item:first-child{grid-column:span 2;grid-row:span 2}
  .gallery--feature > .gallery__item:first-child .gallery__link{aspect-ratio:auto;height:100%}
}

/* Map -------------------------------------------------------------------------
   It draws itself. The button that used to load it saved Google's ~900 kB and
   charged every reader who wanted the map a click on a block whose entire
   content is the thing behind the button. The frame is `lazy`, which keeps most
   of the saving without the toll. */

.map{display:grid;gap:var(--s-3)}
.map__frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:16/9;background:var(--ink-050);box-shadow:var(--shadow-card)
}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map--wide .map__frame{aspect-ratio:21/9}
@media (max-width:44rem){
  .map__frame,.map--wide .map__frame{aspect-ratio:4/3}
}
.map__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-2) var(--s-4);margin:0;font-size:var(--fs-sm)
}
.map__place{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink-600)}
.map__place .icon{width:1.1em;height:1.1em;flex:0 0 auto;color:var(--accent-600)}
.map__open{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;text-decoration:none;color:var(--ink-600)
}
.map__open .icon{width:.9em;height:.9em;transition:transform var(--t-fast)}
.map__open:hover{color:var(--ink)}
.map__open:hover .icon{transform:translateX(3px)}

/* The video, playing where it stands. 16:9, and the frame fills it. */
.videoframe{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);background:var(--ink-800);box-shadow:var(--shadow-card)
}
.videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Form section ----------------------------------------------------------------
   The full-width form in the middle of a page, as opposed to the sidebar one. */

.section--form{background:var(--sand)}

/* -----------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */

.alignwide{width:min(100% + 8rem,var(--wrap));margin-inline:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}
.aligncenter{margin-inline:auto}
.ctaband{
  background:var(--ink);color:var(--white);border-radius:var(--r-xl);
  padding:var(--s-8);text-align:center;margin-block:var(--s-8)
}
.ctaband h2{font-size:var(--fs-2xl);margin-bottom:var(--s-3)}
.ctaband p{color:rgba(255,255,255,.75);margin-bottom:var(--s-5)}
.factgrid{gap:var(--s-6)!important;margin-block:var(--s-7)}

/* -----------------------------------------------------------------------------
   9. Motion / print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

[data-ip-reveal]{opacity:0;transform:translateY(14px)}
[data-ip-reveal].is-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){[data-ip-reveal]{opacity:1;transform:none}}

@media print{
  .site-header,.site-footer,.ctafinal,.leadform,.anchornav,.breadcrumbs,.pagebody__side{display:none!important}
  body{color:#000;background:#fff}
  .prose a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* Video lightbox (created by assets/js/main.js) ---------------------------- */
.ip-lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(10,11,14,.92);padding:1.25rem;animation:ip-fade .2s var(--ease)
}
.ip-lightbox__frame{width:min(100%,1000px);aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.ip-lightbox__frame iframe{width:100%;height:100%;border:0}
.ip-lightbox__close{
  position:absolute;top:1rem;right:1.25rem;width:2.75rem;height:2.75rem;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.75rem;line-height:1
}
.ip-lightbox__close:hover{background:rgba(255,255,255,.25)}

/* The photo variant. No fixed ratio: a portrait shot of a dormitory and a wide
   shot of a campus both have to fit the screen without being cropped, which is
   the one thing a lightbox exists to do. */
.ip-lightbox__frame--photo{
  width:auto;max-width:min(94vw,1400px);aspect-ratio:auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  background:none;box-shadow:none;margin:0
}
.ip-lightbox__img{
  max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
  border-radius:var(--r-md);box-shadow:var(--shadow-lg)
}
.ip-lightbox__caption{font-size:var(--fs-sm);color:rgba(255,255,255,.7)}
.ip-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border:0;border-radius:var(--r-full);cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;
  display:grid;place-items:center;transition:background var(--t-fast)
}
.ip-lightbox__nav:hover{background:rgba(255,255,255,.28)}
.ip-lightbox__nav--prev{left:clamp(.5rem,3vw,2.5rem)}
.ip-lightbox__nav--next{right:clamp(.5rem,3vw,2.5rem)}
@media (max-width:600px){
  .ip-lightbox__nav{width:44px;height:44px;top:auto;bottom:1rem;transform:none}
}

/* An image inside article text that we wrapped in a link ourselves. */
.ip-zoom{display:block;cursor:zoom-in}
.gallery__item a,.prose a.ip-zoom{cursor:zoom-in}
@keyframes ip-fade{from{opacity:0}to{opacity:1}}

/* Two offices, two numbers, each with its town ---------------------------------
   One number was a Bratislava number shown to somebody in Prešov with nothing
   to say a closer office exists. The town is not decoration here, it is the
   thing that makes the second number worth printing. */
.ctafinal__phones{
  list-style:none;margin:var(--s-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s-3)
}
.ctafinal__phone{
  display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.6rem 1rem;border-radius:var(--r-full);
  border:1px solid rgb(0 0 0/.18);
  text-decoration:none;color:inherit;
  transition:background var(--t-fast)
}
.ctafinal__phone:hover{background:rgb(0 0 0/.06)}
.ctafinal__phone .icon{align-self:center;width:1em;height:1em;flex:0 0 auto}
.ctafinal__phone-town{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.ctafinal__phone-number{font-weight:700}

.ctacard__phone-line{display:block;margin-top:.2rem}
.ctacard__phone-line em{font-style:normal;font-size:var(--fs-xs);opacity:.65;margin-left:.4rem}

.footer__contact-town{
  font-style:normal;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.06em;opacity:.55;margin-left:.4rem
}

/* =============================================================================
   The profile page: school, university, language school
   =============================================================================
   One navigation, vertical, down the left of the page.

   There used to be two, both horizontal, both looking alike: a tab strip that
   switched the panel, and a second strip lower down that only scrolled. Two
   bars with the same shape and different behaviour is a puzzle, and the reader
   has to click one to find out which kind it is.

   The rail has both kinds of entry and it says which is which with the icon and
   with what happens: a tab entry swaps the panel beside it and nothing moves, a
   jump entry scrolls to a block further down the same column. The rail is
   sticky, so it is still there afterwards, which is the reason a vertical rail
   beats a horizontal strip here at all. A strip can only stay by covering the
   top of the text; a column costs nothing that was being read.
   ========================================================================== */

.railpage{padding-block:var(--section-y)}
.railpage__grid{display:grid;gap:var(--s-6);align-items:start}
.railpage__grid > *{min-width:0}

@media (min-width:64rem){
  .railpage__grid{grid-template-columns:17.5rem minmax(0,1fr);gap:var(--s-9)}
  .railpage__rail{
    position:sticky;top:calc(var(--header-total,var(--header-h)) + 1.5rem);
    align-self:start;display:grid;gap:var(--s-4)
  }
}

/* The rail --------------------------------------------------------------- */
.railnav{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:var(--s-4);display:grid;gap:.15rem
}
.railnav__head{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-400);
  padding:var(--s-2) var(--s-3) var(--s-3)
}
.railnav__head--jumps{
  margin-top:var(--s-3);padding-top:var(--s-4);
  border-top:1px solid var(--ink-100)
}
.railnav__tabs,.railnav__jumps{display:grid;gap:2px;list-style:none;margin:0;padding:0}

.railnav__item{
  position:relative;
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.7rem .8rem;border-radius:var(--r-md);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-base);
  line-height:1.25;color:var(--ink-600);
  text-align:left;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)
}
.railnav__item:hover{background:var(--ink-050);color:var(--ink)}
.railnav__item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.railnav__label{min-width:0}

/* The icon chip carries the state. A yellow pill behind the whole row would be
   a second button beside the real one in the card underneath; a yellow chip
   reads as a marker. */
.railnav__icon{
  display:grid;place-items:center;flex:0 0 auto;
  width:2rem;height:2rem;border-radius:var(--r-sm);
  background:var(--ink-050);color:var(--ink-400);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-base)
}
.railnav__icon .icon{width:1.05rem;height:1.05rem}

/* The selected entry is a filled yellow row, not a tint. The complaint was
   that the switches were too quiet, and on a rail of eight the reader has to
   be able to find where they are without reading all eight. */
.railnav__item[aria-selected="true"],
.railnav__item.is-active{
  background:var(--accent);color:var(--ink);
  box-shadow:0 8px 18px -6px rgb(240 180 0/.85)
}
.railnav__item[aria-selected="true"] .railnav__icon,
.railnav__item.is-active .railnav__icon{background:rgb(0 0 0/.12);color:var(--ink)}

/* Two solid yellow rows at once is the rail shouting twice: a reader can be on
   the Cena panel and scrolled level with the gallery, and both are true. Where
   there are panels, the panel keeps the strong state and the block being read
   gets the quiet one. */
.railpage.tabs--ready .railnav__item--jump.is-active{
  background:var(--accent-050);color:var(--ink);box-shadow:none
}
.railpage.tabs--ready .railnav__item--jump.is-active .railnav__icon{
  background:var(--accent);color:var(--ink)
}

/* A jump entry with no icon of its own gets a mark, so the two kinds of entry
   still line up down the left edge. */
.railnav__icon--dot{position:relative;background:transparent}
.railnav__icon--dot::before{
  content:"";width:.45rem;height:.45rem;border-radius:50%;
  background:var(--ink-200);transition:background var(--t-fast)
}
.railnav__item:hover .railnav__icon--dot::before{background:var(--ink-400)}
.railnav__item.is-active .railnav__icon--dot{background:transparent}
.railnav__item.is-active .railnav__icon--dot::before{background:var(--ink)}

/* Until main.js folds the panels up, the tab half of the rail would be a column
   of buttons that do nothing. The jump half works with no script at all, so it
   stays. */
.railpage[data-ip-tabs]:not(.tabs--ready) .railnav__tabs,
.railpage[data-ip-tabs]:not(.tabs--ready) .railnav__head:not(.railnav__head--jumps){display:none}
.railpage[data-ip-tabs]:not(.tabs--ready) .railnav__head--jumps{margin-top:0;padding-top:var(--s-2);border-top:0}

/* Under 64rem the rail is a card above the content instead of a column beside
   it, two entries across rather than one long list: eight items stacked is
   350px of navigation before the first sentence, and a horizontal scroller is
   the pattern this replaced. */
/* Between 48 and 64rem there is room for two entries side by side. Both cells
   have to fill the row: an entry whose label wraps onto two lines made the one
   beside it look like a different, smaller control. */
@media (min-width:48rem) and (max-width:63.999rem){
  .railnav__tabs,.railnav__jumps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .railnav__item{height:100%}
}
/* On a phone, one column. Two columns of eight entries with labels of wildly
   different length is a ragged block, and a scrolling row is the pattern this
   replaced. Compact instead: the rows are shorter and the type is smaller, so
   eight of them cost about the same height as the four-line paragraph they sit
   above. */
@media (max-width:47.999rem){
  .railnav{padding:var(--s-3)}
  .railnav__item{padding:.5rem .6rem;gap:.6rem;font-size:var(--fs-sm)}
  .railnav__icon{width:1.75rem;height:1.75rem}
  .railnav__icon .icon{width:.95rem;height:.95rem}
  .railnav__head{padding:var(--s-2) var(--s-2) var(--s-2)}
  .railnav__head--jumps{margin-top:var(--s-2);padding-top:var(--s-3)}
}

/* The column beside the rail --------------------------------------------- */
.railpage__main{display:grid;gap:var(--s-9)}
/* A page whose headings are too few for a rail keeps the reading measure and
   simply centres. The column count has to be reset with it: the grid is
   `17.5rem minmax(0,1fr)` above 64rem, and a lone child lands in the first
   column - which is how /o-nas/ came out as one 280px strip of text. */
.railpage__grid--solo{max-width:var(--wrap-narrow);grid-template-columns:minmax(0,1fr)}
.railpage__panel,.railpage__block{
  min-width:0;
  scroll-margin-top:calc(var(--header-total,var(--header-h)) + 1.5rem)
}
.railpage__panel:focus{outline:none}

/* One heading style for every block on the page and one gap under all of them.
   The complaint was that the space between a heading and its content is
   different everywhere; this is the number, and nothing on a profile sets its
   own. */
.railpage__heading{
  position:relative;font-family:var(--font-head);font-weight:800;
  font-size:var(--fs-2xl);line-height:var(--lh-snug);
  padding-bottom:var(--s-3);margin-bottom:var(--head-gap)
}
.railpage__heading::after{
  content:"";position:absolute;left:0;bottom:0;
  width:2.75rem;height:4px;border-radius:2px;background:var(--accent)
}
.railpage__body.prose{max-width:68ch}
.railpage__body > :first-child{margin-top:0}

/* Inside a panel the imported text brings its own h2s. They are subheads here,
   not section titles, so they must not shout louder than the panel heading. */
.railpage__body.prose h2{font-size:var(--fs-xl);margin-top:var(--s-7)}
.railpage__body.prose h3{font-size:var(--fs-lg)}

/* The price table opens the money panel, so the small print under it needs
   air, not a second heading. */
.railpage__body .pricetable-wrap + *{margin-top:var(--s-6)}

/* The table lives inside `.prose` now, and `.prose table` turns a table into a
   scrolling block with a border on every cell. Two sets of borders inside one
   rounded box is what the broken edge was: the wrapper drew a rounded outline,
   the cells drew square ones, and the table stopped short of both. */
.prose .pricetable{display:table;width:100%;margin:0;font-size:var(--fs-sm)}
.prose .pricetable th,.prose .pricetable td{
  border:0;border-bottom:1px solid var(--ink-100);
  padding:var(--s-4);background:transparent
}
.prose .pricetable thead th{background:var(--ink-050)}
.prose .pricetable tbody tr:last-child th,
.prose .pricetable tbody tr:last-child td{border-bottom:0}

/* University admission requirements, as pairs. An applicant is checking one
   line, the English certificate or the deadline, not reading to the end. */
.admission{
  display:grid;margin:0 0 var(--s-6);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)
}
.admission__row{display:grid;gap:.15rem var(--s-4);padding:var(--s-4) var(--s-5);background:var(--white)}
.admission__row + .admission__row{border-top:1px solid var(--ink-100)}
.admission dt{font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);color:var(--ink-600)}
.admission dd{margin:0;color:var(--ink)}
@media (min-width:40rem){
  .admission__row{grid-template-columns:14rem 1fr;align-items:baseline}
}
.fieldlist .muted{color:var(--ink-400);font-size:var(--fs-sm)}

/* Profile: the key figures as a band ------------------------------------------
   Directly under the banner, which is where the client kept pointing on the
   competitor pages. The value is set large because that is what a reader
   scans, the label small under it.

   The value clamps rather than sitting at --fs-2xl: "1 semester alebo celý
   rok" is a fact like any other, and at 2rem it wrapped onto three lines and
   made the band twice as tall as the five numbers beside it. */
.section--factbar{padding-block:var(--s-6);background:var(--sand);border-bottom:1px solid var(--ink-100)}
.factbar{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
  text-align:center
}
.factbar__item{display:grid;gap:.2rem;align-content:start}
.factbar__value{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.15rem,.85rem + .8vw,1.6rem);line-height:1.15;color:var(--ink);
  text-wrap:balance
}
.factbar__label{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400)
}
/* One fact is a sentence, not a table: centring a lone value in a full-width
   grid leaves it stranded in the middle of an empty band. */
.factbar:has(.factbar__item:only-child){grid-template-columns:auto;justify-content:center}

/* The FAQ under a profile gets the warm ground, so the page still reads as
   chapters once the rail has scrolled past. */
.body-profile .section--faq{background:var(--sand)}

/* =============================================================================
   Proof: the references band
   =============================================================================
   Black, and the only dark band on the page, because it is the one thing a
   stranger checks before believing anything else on it. The Google score and
   the student letters used to be two sections stacked on top of each other,
   each making the same argument without looking at the other.
   ========================================================================== */

.section--refs{position:relative;overflow:hidden;background:var(--ink);color:var(--white)}
.section--refs > .wrap{position:relative;z-index:1}
.refs__glow{
  position:absolute;left:50%;bottom:0;translate:-50% 45%;
  width:min(95vw,58rem);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgb(255 199 0/.16),transparent 62%)
}
.section--refs .eyebrow{color:var(--accent)}
.section--refs .eyebrow::before{background:var(--accent)}
.section--refs .section__more{color:var(--accent)}
.section--refs .section__more:hover{color:var(--white)}

.refs__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--head-gap)
}
.refs__headtext{display:grid;gap:var(--s-2)}

.refs__panel{display:grid;gap:var(--s-4);align-items:stretch;grid-template-columns:1fr}
@media (min-width:56rem){
  .refs__panel:not(.refs__panel--noquotes){grid-template-columns:17rem minmax(0,1fr);gap:var(--s-5)}
}
/* Nothing but the score: it stands in the middle rather than in a 17rem column
   with an empty field beside it. */
.refs__panel--noquotes{justify-items:center}
.refs__panel--noquotes .scorecard{min-width:min(100%,20rem)}

/* The static three. Same glass as the score card, so the row reads as one
   object and not as three white holes punched in the black. */
.reviewgrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))
}
.reviewcard{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);border-radius:var(--r-xl);
  background:linear-gradient(165deg,rgb(255 255 255/.075),rgb(255 255 255/.02));
  box-shadow:var(--shadow-dark)
}
.reviewcard__stars{display:flex;gap:.1rem;color:var(--accent)}
.reviewcard__stars .icon{width:1.05rem;height:1.05rem}
.reviewcard__text{margin:0;flex:1;color:rgb(255 255 255/.9);line-height:1.55}
.reviewcard__by{display:flex;flex-wrap:wrap;gap:.15rem var(--s-2);align-items:baseline;margin:0}
.reviewcard__author{font-family:var(--font-head);font-weight:700}
.reviewcard__when{font-size:var(--fs-sm);color:rgb(255 255 255/.55)}

/* The stars on a rotating Google review. */
.rotator__stars{display:flex;gap:.15rem;color:var(--accent)}
.rotator__stars .icon{width:1.35rem;height:1.35rem}

/* The score card. A glass plate rather than a white box: on the dark ground a
   white card is a hole, and a drop shadow is invisible, so depth here is a
   light edge and a lift on hover. */
.scorecard{
  display:grid;gap:var(--s-2);justify-items:center;align-content:center;text-align:center;
  padding:var(--s-6) var(--s-5);border-radius:var(--r-xl);
  background:linear-gradient(165deg,rgb(255 255 255/.10),rgb(255 255 255/.03));
  box-shadow:var(--shadow-dark);
  color:inherit;text-decoration:none;
  transition:transform var(--t-base)
}
a.scorecard:hover{transform:translateY(-4px)}
.scorecard__num{
  font-family:var(--font-head);font-size:clamp(3rem,2rem + 3vw,4.25rem);
  font-weight:800;line-height:.9;color:var(--accent)
}
.scorecard__stars{display:flex;gap:.15rem;color:var(--accent)}
.scorecard__stars .icon{width:1.4rem;height:1.4rem}
.scorecard__label{font-size:var(--fs-sm);color:rgb(255 255 255/.68);max-width:20ch}
.scorecard__more{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:var(--s-2);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);color:var(--accent)
}
.scorecard__more .icon{width:.9em;height:.9em;transition:transform var(--t-fast)}
a.scorecard:hover .scorecard__more .icon{transform:translateX(4px)}

/* The rotating quote ------------------------------------------------------
   The only moving thing on the site, and it moves for a reason: three
   testimonials side by side are read as a block of grey text and skipped. It
   pauses on hover and on focus, and it does not start at all under
   prefers-reduced-motion; the dots still work, so nothing is unreachable. */
.rotator{
  position:relative;display:grid;gap:var(--s-5);align-content:space-between;
  padding:var(--s-7);border-radius:var(--r-xl);
  background:linear-gradient(165deg,rgb(255 255 255/.075),rgb(255 255 255/.02));
  box-shadow:var(--shadow-dark)
}
@media (max-width:40rem){.rotator{padding:var(--s-5)}}
.rotator__stage{display:grid;gap:var(--s-7)}
.rotator__slide{margin:0;display:grid;gap:var(--s-4)}
/* `display:grid` on a class beats the browser's own `[hidden]{display:none}`,
   so without this every slide stayed on screen and the rotator read as a list.
   The same trap waits for any component that hides a child with the attribute
   and styles it with a class. */
.rotator__slide[hidden]{display:none}
.rotator__slide.is-in{animation:ip-rise .45s var(--ease) both}
.rotator__mark{color:var(--accent);line-height:0}
.rotator__mark .icon{width:2.5rem;height:2.5rem}
.rotator__quote{
  margin:0;font-family:var(--font-head);font-weight:600;
  font-size:var(--fs-xl);line-height:1.5;color:var(--white);text-wrap:pretty
}
.rotator__by{display:flex;align-items:center;gap:var(--s-3)}
.rotator__avatar{
  width:3.25rem;height:3.25rem;border-radius:var(--r-full);overflow:hidden;flex:none;
  background:var(--accent-100);box-shadow:0 0 0 2px var(--accent)
}
.rotator__avatar img{width:100%;height:100%;object-fit:cover}
.rotator__avatar-ph{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--font-head);font-weight:800;color:var(--ink)
}
.rotator__meta{display:grid;line-height:1.35;min-width:0}
.rotator__name{font-family:var(--font-head);font-weight:700;color:var(--white);text-decoration:none}
.rotator__name:hover{color:var(--accent)}
.rotator__where{font-size:var(--fs-sm);color:rgb(255 255 255/.62)}
.rotator__video{
  margin-left:auto;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--r-full);
  background:var(--accent);color:var(--ink);display:grid;place-items:center;
  transition:transform var(--t-fast)
}
.rotator__video:hover{transform:scale(1.08)}
.rotator__dots{display:flex;gap:.4rem}
.rotator__dot{
  width:.55rem;height:.55rem;border-radius:var(--r-full);
  background:rgb(255 255 255/.24);
  transition:background var(--t-fast),width var(--t-base)
}
.rotator__dot:hover{background:rgb(255 255 255/.5)}
.rotator__dot[aria-selected="true"]{background:var(--accent);width:1.75rem}

@keyframes ip-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rotator__slide.is-in{animation:none}
}

/* suhlas pri newslettri v patke, tmave pozadie */
.newsletter__consent{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--fs-xs);line-height:1.45;opacity:.75;margin:0;cursor:pointer}
.newsletter__consent input{width:1.05rem;height:1.05rem;margin-top:.1rem;flex:none;accent-color:var(--accent)}
.newsletter__consent a{color:inherit;text-decoration:underline}
.newsletter__consent:hover{opacity:.9}