/* ==========================================================================
   modern.css — Promete Design System: below-the-fold part (Week 4, §7.4)
   --------------------------------------------------------------------------
   Week 4 (2026-09-24): the modern design system is now the DEFAULT and this
   entry point only carries below-the-fold CSS. The above-the-fold slice
   (tokens, reset, typography, layout, logo, navbar, dropdowns, hero,
   skeleton) lives in css/critical.css and is INLINED by index.php so the
   first paint never blocks on a stylesheet. This file is loaded async
   (media="print" onload="this.media='all'") and imports the components that
   sit below the fold — buttons, cards, footer, forms, Week-3 animations —
   plus the Week-4 responsive + print sheets.
   ========================================================================== */

/* Week 2 components (below the fold) */
@import url('components/buttons.css');
@import url('components/cards.css?v=2.5'); /* bumped for the card__link→btn restyle + initials placeholder + nomination badge colors */
@import url('components/footer.css?v=2.9'); /* bumped: subscribe column back to plain column style (no card), like contact/map (2026-10-08) */
@import url('components/forms.css');
@import url('components/chatbot.css?v=1.5'); /* AI ასისტენტის ვიდჯეტი — ასინქრონად იტვირთება, first paint-ს არ ეხება; 1.3: scroll lock მხოლოდ მობილურზე და <html>-ზე (2026-09-28); 1.4: dark-mode — glass/surface tokens, ტექსტი ღამის რეჟიმშიც ჩანს (2026-09-29); 1.5: პანელი 380×560 → 360×500, ჩიპების კომენტარი — დესკტოპზე wheel→horizontal (2026-10-08) */
@import url('components/pages.css?v=1.13'); /* Week 5 — modern interior pages; 1.1: 2-col cards; 1.2: article chips, nested lists, doc CTA; 1.3: wide-listing + listing filter chips (excellents); 1.4: cpage-filter rename + weekly task detail/winners; 1.5: news pager, article date, media gallery, actions + rich list/heading styles; 1.6: clubs logo cards + detail; 1.7: admission-steps chips + important alert; 1.8: statements form (notices, code box, agreement checkbox, select caret); 1.9: /calendar_of_events — stats strip, year-tile calendar, day calendar, archive groups, single event (2026-09-28); 1.10: /reitingulebi — writing-type cards + graph gallery (2026-09-28); 1.11: shared `.cpage__back` detail back link (clubs / weekly tasks / news, events migrated) (2026-09-29); 1.12: `.photo-lightbox*` — dependency-free gallery lightbox with ‹ › nav (2026-09-29); 1.13: FixedPages live text (admin → Pages) on /review, /For_students, /for_parrents, /mosc_migh_cesi — CMS lists nested inside headings get the body voice back + adjacent `<ul>+<ul>` merge (2026-10-08) */

/* Week 3 */
@import url('animations/scroll-reveal.css');
@import url('animations/stagger.css');
@import url('animations/micro-interactions.css');

/* Week 4 — responsive containers/fluid spacing + print output */
@import url('responsive.css');
@import url('print.css');

/* --------------------------------------------------------------------------
   Modern body base
   ---------------------------------------------------------------------- */
/* Prevent horizontal page scroll caused by legacy artifacts that still bleed
   through in preview mode (Bootstrap's negative-margin pagePath, the closed
   off-screen mobile panel). `clip` avoids creating a scroll container, so
   `position: sticky` (header) and `position: fixed` (panel) keep working.
   The class is set on both <html> and <body> (see index.php) because the
   viewport only honors overflow from <html> / the body fallback. */
html.modern,
body.modern {
  overflow-x: clip;
}
/* Older engines without `clip` (iOS Safari <16) */
@supports not (overflow-x: clip) {
  html.modern,
  body.modern {
    overflow-x: hidden;
  }
}

/* --------------------------------------------------------------------------
   Week-2 shell — page scaffolding around the components
   ---------------------------------------------------------------------- */

/* The legacy page wraps everything in Bootstrap's #carousel div. Detach its
   box so the modern shell lays out naturally (children become body siblings).
   Unsupported browsers just render it as a normal (transparent) block. */
body.modern #carousel {
  display: contents;
}

/* Landmarks / page scaffolding */
body.modern .site-main {
  display: block;
  min-height: 70vh;
}

/* Breadcrumb (pagePath) — restyled as a quiet, caps breadcrumb.
   The legacy element uses Bootstrap negative margins (1470px-wide box) that
   bleed past the viewport; normalize the box in preview mode. */
body.modern .pagePath {
  width: 100%;
  margin-inline: 0;
}

body.modern .pagePath .container {
  padding-block: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.modern .pagePath a {
  color: var(--brand-blue);
  text-decoration: none;
}

body.modern .pagePath a:hover,
body.modern .pagePath a:focus-visible {
  text-decoration: underline;
}

/* Generic section rhythm used by the modern homepage */
body.modern .section {
  padding-block: clamp(var(--space-8), 6vw, var(--space-16));
}

body.modern .section + .section {
  padding-top: 0;
}

/* Homepage scroll-pages (html.home): tighter vertical rhythm than the global
   section padding so each full-viewport page fits its screen better */
html.home body.modern .section {
  padding-block: var(--space-4);
}

/* Owner follow-up 2026-09-25: the section titles (სიახლეები /
   ღონისძიებები / კვირის ამოცანები) are centered and sit a bit higher on big
   screens. The content block is flex-centered inside the page; a negative top
   margin (neutralized by an equal bottom margin so the outer box — and the
   exact one-viewport page height — is unchanged) lifts it uniformly, most
   noticeably on short-content pages like ღონისძიებები. Phones untouched. */
@media (min-width: 992px) {
  html.home body.modern .section .l-container {
    margin-top: calc(-1 * var(--space-12));
    margin-bottom: var(--space-5);
  }
  html.home body.modern .section-head {
    margin-bottom: var(--space-6); /* breathing room above the cards (space-6 = 24px base, compact block = 8px) */
  }
}

/* Owner 2026-09-28 („ეკრანი პატარა გახდა და სათაურები მარცხნივ გავიდა"):
   the home section titles are centered at EVERY width, not from 992px up.
   The base `.section-head` is `justify-content: space-between` (it exists to
   hold a title + a "ყველა …" link on the inner pages), and these four heads
   hold the title alone — below 992px that left the single child hard against
   the flex start, i.e. „მარცხნივ". Keeping `min-width: 0` on the heading
   is the other half: a flex item defaults to `min-width: auto`, so a long
   title could refuse to shrink and, once the row is centered, hang out past
   the left edge of the screen („არა შიგნით"). With it the title wraps INSIDE
   the l-container at any width. */
html.home body.modern .section-head {
  justify-content: center;
  text-align: center;
}

html.home body.modern .section-head h2 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* The ≥1200px compact block pinches the #news / #weekly-tasks heads down to
   8px above the cards ("ძაან დაკრულია ქარდებზე") — restore the comfortable
   gap there too (ID-scoped to the homepage so inner pages keep the compact
   rhythm, and higher specificity than `body.modern #news .section-head`). */
@media (min-width: 1200px) {
  html.home body.modern #news .section-head,
  html.home body.modern #weekly-tasks .section-head {
    margin-bottom: var(--space-6);
  }
}

/* Skip link (a11y) — reachable on first Tab */
body.modern .skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-blue);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-base) ease;
}

body.modern .skip-link:focus {
  top: var(--space-2);
}

/* Clean up blocks the legacy homepage injects that the modern layout
   re-implements; they are dead weight in preview mode only. */
body.modern .legacy-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Week-2 homepage scaffolding (used by pages/main.modern.php)
   ---------------------------------------------------------------------- */

/* Two-column homepage grid — events sidebar + news main */
body.modern .home-grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  body.modern .home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: start;
  }
}

body.modern .home-grid__side {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

/* Week 9 (owner follow-up 2026-09-25): News, Events and Weekly Tasks each
   became their own full-viewport page (html.home scroll pages). Events is a
   panel: month mini-calendar (left) + upcoming events / empty state (right). */
body.modern .events-panel {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 992px) {
  body.modern .events-panel {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: center;
  }
}

/* News page: exactly 3 cards per row (6 cards = 2 clean rows) on ≥768px,
   auto-fill below — a full-width auto-fill grid would give 5+1 rows. */
body.modern .card-grid--fixed3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Owner follow-up 2026-09-25/26: on big screens the news, weekly-tasks AND
   excellent pages must fit one viewport — compact glass cards of ONE size:
   the media/avatar fills the card (~273px) and the contents float on a
   translucent glass panel (82% white + 10px backdrop blur) over its bottom
   edge; phones/small screens keep the normal cards + stacked scroll layout. */
@media (min-width: 1200px) {
  /* Owner follow-up 2026-09-26: the news, weekly-tasks AND excellent cards
     are all ONE size (302px tall on a 900px screen) with the media/avatar
     filling the card and the contents floating on the same translucent glass
     panel. 2026-09-26 laptop fix („ლეპტოპზე პატარა ეკრანია და კონტენტი არ
     ეტევა"): the height is now 100svh-relative — measured fixed budget was
     351px (73px header + 100px above the grid + 162px below + 16px row gap).
     2026-09-26 round 2 („ფოტოები მთლიან ქარდში გამოჩნდეს, ქარდები ცოტა
     სიმაღლეში გავზარდოთ, დაეტევა ეკრანზე"): the home sections are flex
     `min-height: 100svh − 73` + `align-items: center`, so the content block
     sits with TOP/BOTTOM SLACK inside the fixed one-viewport page — the slack
     was ~150px. Budget 351 → **291px** (Δ60 → every card is +30px taller at
     ANY height, no margins touched, the slack absorbs it): cards = (100svh −
     291px)/2 − 2px per row. The news photo is plain `cover` (fills the whole
     card, 48px info strip below it). At ANY viewport height the pages stay
     exactly one screen high (floor 140px for very short screens). The weekly
     artwork is a wide banner (825×98) rendered `contain` on its BGColor. */
  body.modern #weekly-tasks .card__media {
    aspect-ratio: auto;
    height: max(140px, calc((100svh - 291px) / 2 - 2px));
    object-fit: cover;
    object-position: center;
  }
  body.modern #news .card__media {
    aspect-ratio: auto;
    /* Owner follow-up 2026-09-26 („ფოტო სრულად უნდა ჩანდეს და არაფერი უნდა
       აფარებდეს"): the news card is now photo + a slim 48px info strip BELOW
       the photo (nothing overlays the photo anymore). The card total stays the
       same one-viewport height, so the photo takes the rest. */
    height: calc(max(140px, calc((100svh - 291px) / 2 - 2px)) - 48px);
    object-fit: cover;
    object-position: center;
  }
  /* Owner follow-up 2026-09-26 („ფოტოები მთლიან ქარდში გამოჩნდეს — პატარები
     არა"): the blurred-backdrop «contain + inset» pattern is gone — the news
     cover is plain `object-fit: cover` (base `.card__media img` rule) and
     fills the ENTIRE card edge-to-edge; the slim info strip sits below the
     photo and never covers it. */
  body.modern #news .card__body {
    /* Owner follow-up 2026-09-26 („...მეტად გამჭვირვალე... ფოტო სრულად
       გამოჩნდეს და არ გადაეფაროს არაფერი"): the glass bar no longer sits ON
       the photo — it moved BELOW it as a slim, fully transparent strip with a
       title (the „წაკითხვა" button is gone — whole card is a stretched link).
       The photo is fully visible and never covered. */
    position: static;
    display: flex;
    /* Base `.card__body` sets `flex-direction: column` — override to ROW so
       the title lays out horizontally and never drops down the strip. */
    flex-direction: row;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding: var(--space-1) var(--space-3);
    /* Owner follow-up 2026-09-26 („...გამჭვირვალე გახადე"; „...გამჭვირვალე
       არ არის"): fully transparent — a white overlay on the white card still
       read as a solid bar, so the strip now has NO background at all; the
       title floats directly on the card surface. */
    background: transparent;
  }
  body.modern #weekly-tasks .card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body.modern #weekly-tasks .card__meta {
    margin-bottom: var(--space-1);
  }
  body.modern #weekly-tasks .card__title {
    font-size: 0.875rem;
    margin-bottom: var(--space-1);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: clip;
  }
  /* Owner follow-up 2026-09-26 („სიახლე და თარიღი რომ აწერია მოაშორე — ცოტა
     ტექსტიც დააპატარავე"; „...გრძელი სათაური დასაწყისი ჩანდეს ან მეორე ხაზზე
     გადადიოდეს"; owner follow-up 2026-09-26 „წაკითხვა ღილაკი საერთოდ წაშალე"):
     news meta („სიახლე • date") removed entirely; the „წაკითხვა" button is GONE
     (the whole card is already a stretched link — clicking anywhere navigates),
     so the title owns the full strip width and grew 12px → 14px (same as the
     weekly cards); title wraps onto a SECOND line when long (clamp, start
     visible). */
  body.modern #news .card__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    margin-bottom: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* NOTE: must stay `overflow: clip` — `hidden` turns the flex item into a
       scroll container and Chrome collapses its cross-size to one line box
       inside the 48px strip (title squeezed to 12px); `clip` clamps cleanly. */
    overflow: clip;
    text-overflow: ellipsis;
  }
  body.modern #weekly-tasks .card__link {
    margin-top: auto; /* keep the button pinned to the card's bottom-right corner in the compact block too */
  }
  body.modern #news .section-head,
  body.modern #weekly-tasks .section-head {
    margin-bottom: var(--space-2);
  }
  body.modern #news .section-actions,
  body.modern #weekly-tasks .section-actions {
    margin-top: var(--space-2);
  }
}

/* Owner follow-up 2026-09-25: the excellent-page compact cards (latest 6)
   fit exactly one viewport like news/weekly — and (owner follow-up: „სიახლეების
   ქარდებს გამჭირვალედ რო გაუკეთეთ, წარმატებულებსაც მასე") get the same glass
   treatment as #news: the avatar fills the whole compact card and the info
   (badge / name / class) floats over its bottom edge on the same translucent
   panel (82% white + 10px backdrop blur). 273px == the card's previous natural
   height (150px avatar + ~123px body), so the exact one-viewport fit (secH 828
   @1440) is untouched — and it matches the #news / #weekly-tasks card height
   (275px) exactly. html.home-scoped; the inner /excellents page uses
   different markup and keeps the normal person cards. */
@media (min-width: 1200px) {
  /* Owner follow-up 2026-09-26 („წარჩინებულის ფოტოს რო დადებ მხოლოდ შუბლი
     გამოჩნდება"): the excellent photo is now a centered face-first CIRCLE
     (face visible, never a forehead-only cover crop). Size tracks 100svh so
     the exact one-viewport fit is untouched; the frosted panel keeps the
     badge / name / class. */
  html.home body.modern #excellents .card {
    /* the glass body is absolute, so the card must be pinned to the same
       svh height as the news/weekly cards — otherwise the circle-only card
       would collapse to ~118px and the one-viewport page fit would break */
    height: max(140px, calc((100svh - 291px) / 2 - 2px));
  }
  html.home body.modern #excellents .card__avatar {
    display: block;
    margin: var(--space-2) auto 0;
    aspect-ratio: 1;
    width: clamp(56px, calc(100svh - 772px), 112px);
    height: clamp(56px, calc(100svh - 772px), 112px);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    overflow: hidden;
  }
  html.home body.modern #excellents .card__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, calc(100svh - 772px), 112px);
    height: clamp(56px, calc(100svh - 772px), 112px);
    margin: var(--space-2) auto 0;
    border-radius: 50%;
    overflow: hidden;
    font-size: calc(clamp(56px, calc(100svh - 772px), 112px) * 0.38);
  }
  html.home body.modern #excellents .card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  html.home body.modern #excellents .card__title {
    font-size: 0.875rem;
    margin: var(--space-2) 0 0;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: clip;
    text-overflow: ellipsis;
  }
  html.home body.modern #excellents .card__text {
    margin: var(--space-1) 0 0;
  }
  html.home body.modern #excellents .section-actions {
    margin-top: var(--space-2);
  }
}

@media (max-width: 767px) {
  body.modern .card-grid--fixed3 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* Owner follow-up 2026-09-26: „სიახლე და თარიღი რომ აწერია მოაშორე" — the news
   meta line goes away on every screen size. */
body.modern #news .card__meta {
  display: none;
}

/* Owner follow-up 2026-09-28 („ეკრანი პატარა გახდა და სიახლეების ქარდებზე დეტალები
   გამოჩნდა — დიდ ეკრანზე ისე არის"): the news card is the photo + the title, on
   EVERY screen size — the excerpt used to be dropped only inside the ≥1200px
   compact block (the 48px strip has no room for it), so on a narrower window
   the paragraph came back and the card stopped looking like the big screen. The
   excerpt is not lost: it is the first thing the „ყველა სიახლე" listing and the
   article itself show. Same treatment as the meta line above, same reason. */
body.modern #news .card__text {
  display: none;
}

body.modern .section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Phase-1 flag helpers
   ---------------------------------------------------------------------- */

/* High-visibility focus ring on everything while previewing (a11y check) */
body.modern :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* SectionJump landing targets (owner 2026-09-29): the jump focuses the
   destination section with tabindex="-1" so screen readers announce the
   arrival. On a full-bleed section the :focus-visible ring paints a solid
   blue bar along the top AND bottom edge (the sides run off-screen) — the
   owner reported it as a stray blue divider on every homepage jump. Negative
   tabindex elements are never in the keyboard tab order, so dropping their
   ring costs keyboard users nothing. Mirrored in reset.modern.css (source)
   and critical.css (live inline). */
body.modern [tabindex="-1"]:focus-visible {
  outline: none;
}

/* Reduced motion — kill transitions/animations during preview */
@media (prefers-reduced-motion: reduce) {
  body.modern *,
  body.modern *::before,
  body.modern *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important; /* Week 3: stagger delays are motion too */
    scroll-behavior: auto !important;
  }
}