/* Page-level layout: header, sections, footer, responsive breakpoints */

.loqua-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.loqua-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--sb-bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sb-border);
}

.loqua-header__bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.loqua-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.loqua-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sb-surface-2), var(--sb-border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-shadow: inset 0 0 0 1px var(--sb-border);
}

.loqua-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.loqua-brand__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--sb-accent-strong);
}

.loqua-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.loqua-nav a {
  color: var(--sb-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
}

/* "Ещё" dropdown in the desktop nav (hover/focus reveals the panel - no JS state needed) */
.loqua-nav-more {
  position: relative;
}

.loqua-nav-more__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--sb-muted);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.loqua-nav-more__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  z-index: 50;
  display: none;
}

.loqua-nav-more:hover .loqua-nav-more__panel,
.loqua-nav-more:focus-within .loqua-nav-more__panel {
  display: block;
}

.loqua-nav-more__panel-inner {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-accent);
  border-radius: 16px;
  box-shadow: 0 16px 36px var(--sb-shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 240px;
}

.loqua-nav-more__panel-inner a {
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.loqua-nav-more__panel-inner a:hover {
  background: var(--sb-surface);
}

.loqua-nav-more__arrow {
  flex: 0 0 auto;
  color: var(--sb-accent);
}

.loqua-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.loqua-header__cta {
  white-space: nowrap;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--sb-surface-2);
  color: var(--sb-accent);
}

/* Element+class specificity so this always wins over the unconditional
   .loqua-icon-btn { display: flex } from components.css, regardless of file order. */
button.loqua-nav-toggle {
  display: none;
}

/* Floats over the page instead of sitting in normal flow (which used to push the hero
   section down) - .loqua-header is position:sticky, which doubles as the containing
   block this positions against. */
.loqua-mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  background: var(--sb-bg);
  box-shadow: 0 20px 40px var(--sb-shadow);
  padding: 6px 24px 18px;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--sb-border);
}

.loqua-mobile-nav.is-open {
  display: flex;
}

.loqua-mobile-nav a {
  padding: 12px 4px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--sb-border);
}

/* Scoped to a direct child so the "Ещё" details' own last link (Статьи) doesn't
   accidentally pick up the "Отследить прогресс" treatment meant only for that link. */
.loqua-mobile-nav > a:last-child {
  color: var(--sb-accent);
  font-weight: 600;
  border-bottom: none;
}

.loqua-mobile-nav__more summary {
  padding: 12px 4px;
  color: var(--sb-text);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--sb-border);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.loqua-mobile-nav__more summary::-webkit-details-marker {
  display: none;
}

.loqua-mobile-nav__more summary svg {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.loqua-mobile-nav__more[open] summary svg {
  transform: rotate(180deg);
}

.loqua-mobile-nav__more a {
  display: block;
  padding-left: 18px;
}

@media (max-width: 860px) {
  .loqua-nav,
  .loqua-header__cta {
    display: none;
  }
  button.loqua-nav-toggle {
    display: flex;
  }
}

@media (min-width: 861px) {
  .loqua-mobile-nav {
    display: none !important;
  }
}

/* Hero */
.loqua-hero {
  position: relative;
  overflow: hidden;
  padding: min(11vw, 88px) 24px min(9vw, 72px);
  background: var(--sb-surface-2);
}

.loqua-hero__grid {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(220px, 1fr);
  gap: min(6vw, 56px);
  align-items: center;
}

.loqua-hero__eyebrow {
  margin-bottom: 20px;
}

.loqua-hero__title {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 20px;
  max-width: 14ch;
}

.loqua-hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--sb-muted);
  max-width: 46ch;
  margin: 0 0 32px;
  line-height: 1.65;
}

.loqua-stack-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.loqua-hero__art {
  position: relative;
  height: min(46vw, 380px);
}

.loqua-hero__art-photo {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 0;
  right: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px var(--sb-shadow);
  transform: rotate(3deg);
}

.loqua-hero__art-badge {
  position: absolute;
  left: 0;
  bottom: 6%;
  width: 58%;
  background: var(--sb-surface);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px var(--sb-shadow);
  transform: rotate(-4deg);
}

.loqua-hero__art-badge strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--sb-accent);
  display: block;
}

.loqua-hero__art-badge span {
  font-size: 0.82rem;
  color: var(--sb-muted);
}

.loqua-hero__art-tag {
  position: absolute;
  right: 4%;
  bottom: -4%;
  background: var(--sb-dark);
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  transform: rotate(2deg);
}

.loqua-hero__art-tag strong {
  display: block;
  font-size: 1.1rem;
}

.loqua-hero__art-tag span {
  font-size: 0.76rem;
  opacity: 0.75;
}

/* Generic section spacing */
.loqua-section {
  padding: min(9vw, 80px) 24px;
}

.loqua-section--tinted {
  background: var(--sb-surface-2);
}

.loqua-section__title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 8px;
  text-align: center;
}

/* About */
.loqua-about-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: min(6vw, 48px);
  margin-bottom: min(8vw, 72px);
}

.loqua-about-grid--points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.loqua-founder {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(280px, 1fr);
  gap: min(6vw, 48px);
  align-items: start;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 24px;
  padding: min(5vw, 40px);
}

.loqua-founder__photo {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 10px 30px var(--sb-shadow);
}

/* Spain-admission variant: taller photo, text column matches its height and scrolls
   internally instead of running on past the photo. The row gets an explicit height so
   both children stretch to the same definite size - relying on aspect-ratio here instead
   fights CSS Grid's row-auto-sizing (the row keeps growing to fit the text). */
.loqua-founder--scroll {
  align-items: stretch;
  height: min(72vh, 640px);
}

.loqua-founder--scroll .loqua-founder__photo {
  width: 100%;
  height: 100%;
}

.loqua-founder__scroll-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.loqua-founder__scroll-text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-accent) var(--sb-surface-2);
}

@media (max-width: 700px) {
  /* Photo and text stack (see the shared .loqua-founder mobile rule below), so they no
     longer share one row to stretch to - instead the text block caps its own height and
     scrolls internally, same idea as desktop but sized for a single narrow column. */
  .loqua-founder--scroll {
    align-items: stretch;
    height: auto;
  }
  .loqua-founder--scroll .loqua-founder__photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .loqua-founder__scroll-col {
    min-height: 0;
    overflow: visible;
  }
  .loqua-founder__scroll-text {
    flex: none;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 10px;
  }
}

.loqua-founder__eyebrow {
  display: inline-block;
  color: var(--sb-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .loqua-hero__grid,
  .loqua-about-grid,
  .loqua-founder {
    grid-template-columns: 1fr !important;
  }
  .loqua-teachers__head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Teachers */
.loqua-teachers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* Repeat CTA */
.loqua-repeat-cta {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-strong));
  border-radius: 28px;
  padding: min(8vw, 64px) min(6vw, 40px);
  color: #fff;
}

.loqua-repeat-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 14px;
}

.loqua-repeat-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 44ch;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Spain admission page: hero */
.loqua-spain-hero {
  padding: min(11vw, 84px) 24px min(7vw, 56px);
}

.loqua-spain-hero__inner {
  max-width: 820px;
  text-align: center;
}

.loqua-spain-hero__inner .loqua-badge {
  margin-bottom: 20px;
}

.loqua-spain-hero__title {
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.16;
  margin: 0 0 20px;
}

.loqua-spain-hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--sb-muted);
  max-width: 56ch;
  margin: 0 auto 32px;
  line-height: 1.65;
}

/* Footer */
.loqua-footer {
  background: var(--sb-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: min(7vw, 56px) 24px 28px;
}

.loqua-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}

.loqua-footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.loqua-footer__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.loqua-footer__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loqua-footer__brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.loqua-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
  font-family: inherit;
}

.loqua-footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.loqua-footer__col a {
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}

.loqua-footer__soon {
  font-size: 0.82rem;
  opacity: 0.55;
}

.loqua-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}

.loqua-footer__bottom p {
  font-size: 0.78rem;
  opacity: 0.6;
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 560px) {
  .loqua-stack-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .loqua-stack-btns > * {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .loqua-form-2col {
    grid-template-columns: 1fr !important;
  }
}