/* CKEditor5 content styles, shared between the public detail pages (loaded via
   templates/partials/ck_content_styles.html) and the Django admin's editing
   view (loaded via each relevant ModelAdmin's Media.css) — CKEditor5 tags its
   own editable root with the same "ck-content" class, so one stylesheet keeps
   what admins see while editing consistent with what visitors see live. */

/* Establishes a new block formatting context, which makes this container
   automatically wrap its own height around any floated children (images,
   floated videos) instead of collapsing to zero extra height around them.
   Without this, if the LAST thing in the description is a floated image with
   nothing non-floated after it to "clear" past, the container's box ends
   before the image visually does — so the image spills out and overlaps
   whatever section (e.g. the inquiry form) comes right after it on the page.
   This was previously "fixed" by spamming blank paragraphs after the images
   until they added up to enough height, which is exactly the workaround this
   makes unnecessary. */
.ck-content { display: flow-root; }

.ck-content .image { display: table; margin: 1.25rem auto; clear: both; }
.ck-content .image img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0.75rem; }
.ck-content .image-style-side,
.ck-content .image-style-align-right { float: right; margin: 0.25rem 0 1rem 0.75rem; max-width: 46% !important; }
.ck-content .image-style-align-left { float: left; margin: 0.25rem 0.75rem 1rem 0; max-width: 46% !important; }
/* The compound selector (both classes) beats the plain ".image" rule above on
   specificity, so a floated image drops the forced clear:both — a single
   image floating beside a paragraph of text still doesn't need it cleared;
   text just wraps around it and later content flows below once it runs past
   the image's height. The !important is needed because dragging an image's
   resize handle adds CKEditor's own "image_resized" class with an inline
   width:NN% *and* a ".image.image_resized{max-width:100%}" rule in the
   admin's bundled editor CSS — at 3 classes that beats our 2-class selector
   on specificity, so !important forces our cap to win regardless. */
.ck-content .image.image-style-side,
.ck-content .image.image-style-align-right,
.ck-content .image.image-style-align-left { clear: none; }
.ck-content .image-style-align-center,
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right { float: none; margin-left: auto; margin-right: auto; }
.ck-content figcaption { font-size: 0.75rem; color: #737373; text-align: center; margin-top: 0.375rem; }
/* Headings always start a fresh line below any floated images/videos instead
   of possibly squeezing into whatever column space is left beside one. */
.ck-content h2, .ck-content h3, .ck-content h4 { clear: both; }

.ck-content table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; clear: both;
  font-size: 0.875rem;
}
.ck-content table th, .ck-content table td {
  padding: 0.75rem 1rem; text-align: left; border: 1px solid #ececec;
}
.ck-content table th { background: #fafafa; font-weight: 700; color: #171717; }
.ck-content table tbody tr:nth-child(even) { background: #fcfcfc; }

.ck-content video { width: 100%; border-radius: 0.75rem; margin: 1.5rem 0; clear: both; }
.ck-content .media { margin: 1.5rem 0; border-radius: 0.75rem; overflow: hidden; clear: both; }
.ck-content iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; }

/* Let a self-hosted <video> float next to an image or text instead of always
   clearing onto its own line. CKEditor's own "Insert media" (YouTube/Vimeo)
   widget can't take this class — that needs plugins this build doesn't ship —
   so for an embedded video, wrap it by hand via the "Source editing" toolbar
   button instead, e.g.:
     <div class="image-style-side"><iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe></div>
   which is just a plain div and already picked up by the generic
   .image-style-side/.image-style-align-left rules above. */
.ck-content video.image-style-side { float: right; clear: none; width: auto; margin: 0.25rem 0 1rem 0.75rem; max-width: 46%; }
.ck-content video.image-style-align-left { float: left; clear: none; width: auto; margin: 0.25rem 0.75rem 1rem 0; max-width: 46%; }

/* Deliberate side-by-side ROW (two images, or an image + video), where content
   afterwards should start cleanly below with no manual "spam Enter until it
   clears" workaround. Floats can't do this without a clearfix, so this is a
   plain (non-floated) flex row instead — write it via the "Source editing"
   toolbar button:
     <div class="image-row">
       <figure class="image"><img src="..." alt=""></figure>
       <figure class="image"><img src="..." alt=""></figure>
     </div>
     <p>This starts right below the row, no blank paragraphs needed.</p>
   Works the same with a video div (class="video-embed") as one or both items. */
.ck-content .image-row { display: flex; align-items: flex-start; gap: 1rem; margin: 1.5rem 0; clear: both; }
.ck-content .image-row .image,
.ck-content .image-row .video-embed,
.ck-content .image-row video,
.ck-content .image-row .media { display: block; float: none; clear: none; margin: 0; flex: 1 1 0; width: 100% !important; max-width: 100% !important; }
.ck-content .image-row .image img { width: 100%; }
.ck-content .image-row iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; }

@media (max-width: 640px) {
  .ck-content .image-style-side,
  .ck-content .image-style-align-right,
  .ck-content .image-style-align-left { float: none; width: 100% !important; max-width: 100% !important; margin-left: 0; margin-right: 0; }
  .ck-content video.image-style-side,
  .ck-content video.image-style-align-left { width: 100% !important; }
  /* Stack a side-by-side row into full-width items instead of squeezing two
     narrow columns onto a small screen. */
  .ck-content .image-row { flex-direction: column; }
}

/* Collapsible sections (e.g. one per course curriculum day) — plain
   <details>/<summary>, no JS. Write directly via the "Source editing"
   toolbar button:
     <details>
       <summary>Ден 1 — Основи и безопасност</summary>
       <p>...</p>
       <ul>...</ul>
     </details>
   Each one is auto-numbered by a CSS counter (no dependency on the summary
   text itself), with a rotating chevron in its own circle button and a
   fade-in on the revealed content. Hidden default markers via
   ::-webkit-details-marker / list-style so only the custom chevron shows. */
.ck-content { counter-reset: accordion; }
.ck-content details {
  counter-increment: accordion;
  border: 1px solid #ececec; border-radius: 1rem; margin: 1rem 0; clear: both;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ck-content details:hover { border-color: #e2b7b7; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.ck-content details[open] { border-color: #cf2e2e; box-shadow: 0 8px 24px rgba(207,46,46,0.08); }
.ck-content summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.5rem;
  font-weight: 700; font-size: 1.0625rem; color: #171717;
  display: flex; align-items: center; gap: 1rem;
}
.ck-content summary::-webkit-details-marker { display: none; }
.ck-content summary::before {
  content: counter(accordion); flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: rgba(207,46,46,0.1); color: #cf2e2e;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease;
}
.ck-content details[open] summary::before { background: #cf2e2e; color: #fff; }
.ck-content summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0; margin-left: auto;
  border-right: 2px solid #a3a3a3; border-bottom: 2px solid #a3a3a3;
  transform: rotate(45deg); transition: transform 0.25s ease, border-color 0.2s ease;
}
.ck-content details[open] summary::after { transform: rotate(-135deg); border-color: #cf2e2e; }
.ck-content details > :not(summary) { margin-left: 1.5rem; margin-right: 1.5rem; }
.ck-content details > summary + * { margin-top: 0.25rem; animation: accordion-fade-in 0.25s ease; }
.ck-content details > :last-child { margin-bottom: 1.5rem; }
@keyframes accordion-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CKEditor5's Font plugin outputs these size classes on <span>. */
.ck-content .text-tiny { font-size: 0.7em; }
.ck-content .text-small { font-size: 0.85em; }
.ck-content .text-big { font-size: 1.4em; }
.ck-content .text-huge { font-size: 1.8em; }

/* Image grid: wrap several image figures in <div class="image-grid"> (via Source
   editing) to lay them out in rows of 3 instead of stacking them vertically. */
.ck-content .image-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; align-items: center; margin: 1.5rem 0;
}
.ck-content .image-grid > figure,
.ck-content .image-grid > figure.image { margin: 0; width: auto; max-width: 100%; float: none; }
.ck-content .image-grid img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .ck-content .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}