/* Abroad Language School page */

/* ---------- Hero ----------
   After the reference (a Caravaggio exhibition page): the painting fills the first
   screen edge to edge and the header sits on it; "Abroad / Language School" runs across
   it in cream, the second line the full width and bleeding just off the right edge; the
   short description sits small beside "Abroad", and an outlined button goes below. */
.ls-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1000px;
  overflow: hidden; padding: 0; background: #1b140f; color: var(--cream); }
.ls-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* --t is the title size, set so "Language School" fills the screen with a small margin
   (3vw) on each side; --a-end is where "Abroad" ends, for the description beside it.
   The title is in Instrument Serif in both languages (it's Latin letters either way), so
   the Ukrainian page shows it the same as the English one. --edge lines the button up
   with the logo. */
.ls-hero-mark { --t: clamp(60px, 17.4vw, 440px); --a-end: 2.36; position: absolute; left: 3vw; top: 52%;
  transform: translateY(-50%); white-space: nowrap;
  --edge: calc(max(48px, (100vw - 1320px) / 2 + 48px) - 3vw); }
.ls-title { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 500; font-size: var(--t); line-height: .86;
  letter-spacing: -0.02em; color: #F3E9D6; }
.ls-title-a, .ls-title-b { display: block; }

/* The description, small, beside "Abroad": its last line sits on the word's baseline */
.ls-hero-kicker { position: absolute; left: calc(var(--t) * (var(--a-end) + .2)); top: calc(var(--t) * .7);
  transform: translateY(-100%); width: min(340px, calc(100vw - var(--t) * (var(--a-end) + .2) - 48px)); margin: 0;
  white-space: normal; font-family: var(--font-body); font-size: clamp(11px, 1vw, 14px); font-weight: 700; line-height: 1.55;
  letter-spacing: .08em; text-transform: uppercase; }

/* Outlined button under the name, at the left, on the dark of the wheel */
.ls-hero-btn {
  position: absolute; left: var(--edge); top: 100%; margin-top: clamp(18px, 2.4vw, 40px); padding: 15px 26px;
  background: transparent; color: var(--cream); border: 1px solid rgba(246, 241, 232, .85); border-radius: 0;
  font-family: var(--font-body); font-size: clamp(12px, 1vw, 14px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s;
}
.ls-hero-btn:hover { background: var(--cream); color: var(--ink); }


/* On this page the header sits on the painting in cream, and turns back to the usual
   cream bar once the painting has scrolled away (script at the bottom of the page) */
.hdr.hdr-over { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; color: var(--cream);
  transition: background-color .3s, color .3s; }
.hdr.hdr-over:not(.is-solid) nav a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: 6px; }
.hdr.hdr-over.is-solid { background: rgba(246,241,232,.92); backdrop-filter: blur(8px); color: var(--ink); }

/* Phones: no room beside "Abroad", so the description and button follow the name */
@media (max-width: 700px) {
  .ls-hero { height: clamp(560px, 92svh, 780px); min-height: 0; }
  .ls-hero-img { object-position: 57% 0; } /* her face sits right of the crop's centre */
  /* Darken the bottom, where the text sits over her white sleeves */
  .ls-hero::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(20, 12, 8, .7)); }
  .ls-hero-mark { z-index: 1; }
  .ls-hero-mark { top: auto; bottom: 36px; transform: none; }
  .ls-hero-kicker { position: static; transform: none; width: auto; max-width: 400px; margin: 22px 0 0; font-size: 11px; }
  .ls-hero-btn { position: static; margin: 22px 0 0; padding: 13px 20px; }
}

/* ---------- What makes us different ----------
   Four blocks in a row, after the reference with the row of see-through cards: the open
   block is wider, a little taller and solid dark brown; the others are pale brown and
   see-through. Every block shows its number, title and text. The page script opens
   whichever block the mouse is over. */
.ls-diff { padding: 40px 0 120px; }
.ls-diff .sec-head h2 { font-size: clamp(38px, 6vw, 60px); } /* smaller, so it doesn't compete with the hero */
.ls-diff-grid { display: flex; align-items: center; gap: 14px; min-height: 330px; }
.ls-diff-grid article {
  position: relative; flex: 1 1 0; min-width: 0; height: 280px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer; outline: none;
  background: rgba(140, 95, 60, .15); color: var(--ink); border-radius: 28px; padding: 26px 24px 28px;
  transition: flex-grow .6s var(--ease), height .6s var(--ease), background-color .45s, color .45s;
}
.ls-diff-grid article.is-open { flex-grow: 1.7; height: 330px; background: var(--ink); color: var(--cream); cursor: default; }
.ls-diff-grid article:focus-visible { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }
.ls-diff-grid .mono { font-family: var(--font-body); font-size: 14px; opacity: .7; }
/* The title sits low in the block, with the text under it */
.ls-diff-grid h3 { font-size: clamp(28px, 2.4vw, 34px); line-height: 1; margin: auto 0 0; transition: font-size .6s var(--ease); }
.ls-diff-grid article.is-open h3 { font-size: 44px; }
/* The text shows on every block, a little fainter on the closed ones */
.ls-diff-grid p { margin: 12px 0 0; font-size: 16px; line-height: 1.4; opacity: .75; transition: opacity .45s; }
.ls-diff-grid article.is-open p { opacity: .92; }

/* Narrower screens: no room for a row, so the blocks go two by two (then one per row)
   and all stay open */
@media (max-width: 1200px) {
  .ls-diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 0; }
  .ls-diff-grid article, .ls-diff-grid article.is-open {
    height: auto; min-height: 260px; background: var(--ink); color: var(--cream); cursor: default;
  }
  .ls-diff-grid h3, .ls-diff-grid article.is-open h3 { font-size: 38px; padding-top: 40px; }
  .ls-diff-grid p, .ls-diff-grid article.is-open p { margin-top: 14px; opacity: .92; }
}
@media (max-width: 600px) {
  .ls-diff-grid { grid-template-columns: 1fr; }
  .ls-diff-grid article, .ls-diff-grid article.is-open { min-height: 0; }
}

/* ---------- Lesson designs ----------
   A small centred line introduces the section; under it the screenshots run on the
   countries strip from the main page (.country-strip / .strip-track in site.css).
   Every screenshot is the same height and keeps its own width, so none is cropped. */
.ls-lessons { padding: 20px 0 130px; }
.ls-lessons-intro {
  margin: 0 0 44px; text-align: center;
  font-family: var(--font-head); font-style: italic; font-size: 26px; color: var(--terracotta);
}
.ls-lesson { position: relative; flex: none; margin: 0; }
/* The photo is clipped to the rounded frame; the badge sits outside it so it can stick out */
.ls-lesson-shot { overflow: hidden; border: 3px solid var(--terracotta); border-radius: 28px; background: var(--cream-2); }
.ls-lesson img { display: block; height: 240px; width: auto; max-width: none; }
/* Each screenshot leans a little, to one side or the other, so the strip feels loose
   and hand-placed rather than lined up. The pattern repeats every four, so the copies
   the strip script adds lean too. */
.ls-lesson { transform: rotate(var(--tilt, 0deg)); }
.ls-lesson:nth-child(4n+1) { --tilt: -2.5deg; }
.ls-lesson:nth-child(4n+2) { --tilt: 1.8deg; }
.ls-lesson:nth-child(4n+3) { --tilt: -1.2deg; }
.ls-lesson:nth-child(4n+4) { --tilt: 2.6deg; }
/* Topic badge: the country-name pill from the main page (site.css), a size smaller
   to suit the shorter screenshots. It keeps its own tilt on top of the card's. */
.ls-lesson .country-name { font-size: 14px; padding: 8px 16px; border-width: 2px; }
.ls-lesson .country-name.at-top-left { top: -14px; left: -14px; --tilt: -7deg; }
.ls-lesson .country-name.at-bottom-right { bottom: -14px; right: -14px; --tilt: 6deg; }
/* More room above and below than the main page's strip, so the tilted cards and the
   badges sticking out of them are never clipped by the strip's edge */
.ls-lessons .country-strip { padding: 60px 0; margin: -30px 0 -60px; }

@media (max-width: 700px) {
  .ls-lesson-shot { border-radius: 20px; }
  .ls-lesson .country-name { font-size: 12px; padding: 6px 12px; }
  .ls-lesson img { height: 150px; }
}

/* ---------- How did it start ----------
   After the client's reference: three photos in a row, then the heading on the left
   and the director's words on the right. A rounded block in the site's dark
   brown (the footer's colour), shaped like the call-to-action block on the main page
   (.cta in site.css). A faint light grain, as in the reference, is laid over it. */
.ls-story { padding: 0 0 120px; }
.ls-story-box {
  position: relative; margin: 0 24px; border-radius: 40px; overflow: hidden;
  background: var(--ink); color: var(--cream);
  padding: clamp(50px, 6vw, 90px) 24px clamp(56px, 7vw, 100px);
}
.ls-story-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ls-story-photos, .ls-story-text { position: relative; max-width: 860px; margin: 0 auto; }

/* Three frames of the same size; each photo is cropped to fill its frame */
.ls-story-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ls-story-photos figure { margin: 0; aspect-ratio: 5 / 6; overflow: hidden; background: var(--cream-2); }
.ls-story-photos img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.05); } /* the slight zoom hides the white scan edges on two of the photos */

/* Heading left, words right; they sit under the photos at the same width */
.ls-story-text { display: grid; grid-template-columns: 1fr 1.9fr; gap: 50px; align-items: start; margin-top: 60px; }
.ls-story-text h2 {
  font-size: clamp(44px, 5.4vw, 72px); line-height: .95;
}
.ls-story-text p { margin: 0; font-size: 18px; line-height: 1.45; text-align: justify; hyphens: auto; }
.ls-story-text .ls-story-sign { margin-top: 26px; text-align: left; font-size: 14px; opacity: .85; }

@media (max-width: 760px) {
  .ls-story-box { margin: 0 12px; border-radius: 28px; }
  .ls-story-photos { gap: 10px; }
  .ls-story-text { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .ls-story-text p { font-size: 16px; text-align: left; }
}

/* ---------- For university students ---------- */
/* Painting on the left, a smaller one laid across the seam, text centred on the right */
.ls-exams { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0; margin: 0 24px 120px; min-height: clamp(620px, 58vw, 820px); }
.ls-exams-art { position: relative; }
.ls-exams-art figure { margin: 0; overflow: hidden; background: var(--cream-2); }
.ls-exams-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-exams-main { position: absolute; inset: 0; }
.ls-exams-main img { object-position: 50% 40%; }
.ls-exams-inset { position: absolute; z-index: 1; right: -18%; bottom: 13%; width: 38%; aspect-ratio: 5 / 4; }
.ls-exams-inset img { object-position: 50% 42%; }

.ls-exams-text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 60px 0 60px 16%; max-width: 660px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.ls-exams-text h2 { text-transform: uppercase; font-size: clamp(36px, 3.8vw, 56px); line-height: .98; letter-spacing: -0.01em; }
.ls-exams-text h2 em { font-style: italic; color: var(--terracotta); }
.ls-exams-lead { max-width: 470px; margin: 30px 0 0; font-family: var(--font-head); font-style: italic; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; }
/* Read as a list, as the client wrote it: a dash before each point, lines flush left,
   the list itself centred under the intro */
.ls-exams-points { list-style: none; margin: 30px 0 0; padding: 0; font-size: 15px; line-height: 1.45; text-align: left; }
.ls-exams-points li { position: relative; padding-left: 26px; }
.ls-exams-points li::before { content: '—'; position: absolute; left: 0; color: var(--terracotta); }
.ls-exams-points li + li { margin-top: 10px; }

@media (max-width: 900px) {
  .ls-exams { grid-template-columns: 1fr; margin: 0 12px 90px; min-height: 0; }
  .ls-exams-art { height: 440px; }
  .ls-exams-inset { right: 16px; bottom: -48px; width: 44%; }
  .ls-exams-text { padding: 80px 12px 0; }
}

/* ---------- Formats & pricing ---------- */
/* Outlined cards after the reference: name, who it is for, the price large, a button,
   then the details under a thin rule. Two pairs, each under a label with a line. */
.ls-prices { padding: 0 0 130px; }
.ls-prices .sec-head h2 { font-size: clamp(46px, 9vw, 88px); }
.ls-price-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ls-price-label { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font-size: 14px; }
.ls-price-label::after { content: ''; flex: 1; height: 1px; background: rgba(42, 29, 20, .25); }
.ls-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: calc(100% - 36px); }

.ls-price { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px 32px;
  border: 1.5px solid var(--terracotta); border-radius: 22px; }
.ls-price h3 { font-size: 34px; line-height: 1; min-height: 2em; }
.ls-price-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.45; opacity: .8; min-height: 4.35em; }
.ls-price-big { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; min-height: 76px; }
.ls-price-big b { font-family: var(--font-head); font-weight: 400; font-size: 64px; line-height: .9; color: var(--terracotta); font-variant-numeric: lining-nums; }
.ls-price-big span { font-size: 13px; line-height: 1.3; opacity: .7; }
/* "Price on application" takes the price's place, set a size down so it fits one card */
.ls-price-ask { font-family: var(--font-head); font-size: 32px; line-height: 1; color: var(--terracotta); }
.ls-price-alt { margin: 10px 0 0; font-size: 13px; line-height: 1.45; opacity: .7; min-height: 2.9em; }
.ls-price-btn { margin-top: 22px; padding: 9px 18px; border-radius: 999px; background: transparent;
  border: 1px solid var(--terracotta); color: var(--terracotta); font: 600 14px/1 var(--font-body); cursor: pointer;
  transition: background .2s, color .2s; }
.ls-price-btn:hover { background: var(--terracotta); color: var(--cream); }

.ls-price-more { align-self: stretch; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(42, 29, 20, .2); }
.ls-price-pack + .ls-price-pack { margin-top: 20px; }
.ls-price-pack p { margin: 0; }
.ls-price-len { font-weight: 600; font-size: 15px; }
.ls-price-pack .mono { margin-top: 4px; font-family: var(--font-body); font-size: 14px; color: var(--terracotta); text-transform: none; }
.ls-price-pack ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; line-height: 1.5; }

@media (max-width: 1180px) {
  .ls-price-groups { grid-template-columns: 1fr; gap: 44px; }
  .ls-price-row { height: auto; }
}
@media (max-width: 640px) {
  .ls-price-row { grid-template-columns: 1fr; }
  .ls-price h3, .ls-price-desc, .ls-price-big, .ls-price-alt { min-height: 0; }
}

/* ---------- Final CTA ----------
   The block itself is the main page's (.plans in site.css); only the photo differs.
   The people sit in the lower part of this photo, so it's framed lower. */
.plans-photo img { object-position: 50% 72%; }