/* The blog system's look (plan step A16; docs/BLOG-SYSTEM.md 7.1b; D51) — the demo Daniel approved on 2026-10-04.
   The blocks themselves are the web template's own (main.css already carries every NiceSchool section); this file adds
   what the template has no look for, and holds the blog pages to Daniel's rules: big, bold, high contrast, left-aligned.
   Motion (Daniel, 2026-10-05: "use more effects like these", the old Featured page's float-in, "and the easing when your mouse
   moves over objects"): the boxes and tiles come in and lift; the words of a post never move. Loaded by blog.php, blog-details.php and the two bands
   (the sailing page, Our Cruises). Colours: main.css's variables only (--blog-banner, --blog-banner-text are in its :root). */

/* ---- motion: boxes come in and lift; the reading never moves --------------------------------------------- */
/* The entrances are the template's AOS (data-aos on the five featured boxes, the tiles and the cards; main.js starts it and leaves
   phones out, and main.js and main.css leave out a device set to "reduce motion", site-wide). Over a box the pointer eases it up
   and its picture forward. The words of a post stay still, and a device set to "reduce motion" gets no motion at all. */
.jw-blog :is(.news-hero .post-item, .news-posts article):hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
/* AOS sits on a wrapper (.jw-enter; the cards' and tiles' columns are theirs), the hover lift on the box inside. On one element
   the hover's transition took over AOS's timing, and AOS's delay held back every hover (found 2026-10-05). The template spaces
   two side posts with :last-child, which each wrapper now defeats: the wrappers carry the space. */
.jw-blog .news-hero .side-posts > .jw-enter + .jw-enter { margin-top: 30px; }
/* Our motion exists only for a device that has not asked for less (Daniel's pattern, 2026-10-05) */
@media (prefers-reduced-motion: no-preference) {
  .jw-blog :is(.news-hero .post-item, .news-posts article, .life-categories .category-card) {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1);
  }
  .jw-blog :is(.news-hero .post-item, .news-posts article):hover { transform: translateY(-6px); }
  .jw-blog :is(.news-hero, .news-posts) .post-img img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
  .jw-blog :is(.news-hero .post-item, .news-posts article):hover .post-img img { transform: scale(1.06); }
}
.jw-blog .blog-details .article-content *, .jw-blog .blog-details .article-content *::before, .jw-blog .blog-details .article-content *::after { transition: none !important; animation: none !important; }
.jw-blog .blog-details .article-content :is(.step-item, .trend, .comparison-card, .gallery-item, .event, .cta-item):hover { transform: none !important; }
/* The template's own motion (main.css: hover lifts and zooms, transitions on everything) is not ours to wrap: stopped here */
@media (prefers-reduced-motion: reduce) {
  .jw-blog *, .jw-blog *::before, .jw-blog *::after { transition: none !important; animation: none !important; }
  .jw-blog :is(.post-item, .post-img, article, .category-card):hover, .jw-blog :is(.post-item, article):hover img { transform: none !important; }
}
.jw-blog .news-hero { text-align: left; font-size: inherit; }
.jw-blog :is(.news-posts, .news-hero, .related-events, .life-categories, .blog-details) :is(p, h2, h3, h4, li, dd, dt, .post-meta, .post-content) { text-align: left; }
.jw-blog .campus-facilities .campus-gallery-section .gallery-grid .gallery-item .gallery-overlay { opacity: 1 !important; transform: none !important; }
html:has(.jw-blog) { scroll-behavior: auto; }

/* ---- larger text (A A+ A++), remembered on this device by blog.js ------------------------------------ */
html.jw-text-125 { font-size: 125%; }
html.jw-text-150 { font-size: 150%; }
.jw-reading-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 0; }
.jw-reading-tools .btn { font-size: 1.05rem; font-weight: 700; border-width: 2px; }
.jw-reading-tools .btn[aria-pressed="true"] { background: var(--accent-color); color: var(--contrast-color); }
.jw-reading-tools .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the top picture, its credit, the category banner ---------------------------------------------- */
.jw-credit { display: block; margin-top: 6px; font-size: 1rem; color: var(--default-color); }
.jw-credit a { color: inherit; text-decoration: underline; }
.jw-cat-banner { display: flex; align-items: center; gap: 22px; padding: 34px 30px; border-radius: 10px; background: var(--blog-banner, #12385e); color: var(--blog-banner-text, #ffffff); }
.jw-cat-banner i { font-size: 3.4rem; line-height: 1; }
.jw-cat-banner strong { font-size: 1.8rem; letter-spacing: .02em; }
.jw-cat-banner.small { padding: 22px 18px; aspect-ratio: 4 / 3; flex-direction: column; justify-content: center; text-align: center; border-radius: 0; }
.jw-cat-banner.small i { font-size: 2.6rem; }
.jw-cat-banner.small strong { font-size: 1.25rem; }
/* On a card the words lie over the lower part of the picture: the icon goes to the top right, clear of the title and of the category badge. */
.news-posts .jw-cat-banner.small, .news-hero .jw-cat-banner.small { justify-content: flex-start; align-items: flex-end; }

/* ---- the list's cards: shorter (Daniel, 2026-10-05: "a lot of wasted space"), the words still on the picture ------------- */
/* The photo and the words share one grid cell, so when the words need more than the 16:9 photo they make the card taller: the
   template lays them over the photo out of the flow, and they ran off the card's top (186-214 px of words in a 166 px card;
   Daniel, 2026-10-05: "too small or just reduce the line height a little"). The two cards of a row keep one height. */
.jw-blog .news-posts article { margin-bottom: 0; border-radius: 10px; overflow: hidden; height: 100%; }
.jw-blog .news-posts .post-img { display: grid; aspect-ratio: auto; height: 100%; }
.jw-blog .news-posts .post-img > * { grid-area: 1 / 1; }
.jw-blog .news-posts .post-img > img, .jw-blog .news-posts .jw-cat-banner.small { aspect-ratio: 16 / 9; width: 100%; height: 100%; object-fit: cover; }
.jw-blog .news-posts .post-content { position: relative; align-self: end; padding: 16px 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.jw-blog .news-posts .post-category { margin-bottom: 6px; }
.jw-blog .news-posts .title { font-size: 19px; line-height: 1.2; margin-bottom: 8px; }

/* ---- the section tiles: the section's photo behind the icon, darkened so the white words read (Daniel, 2026-10-05) -------- */
.jw-blog .life-categories .category-card.jw-tile-photo { position: relative; overflow: hidden; color: #fff;
  background: #0d2a3f var(--jw-tile-photo) center / cover no-repeat; }
.jw-blog .life-categories .category-card.jw-tile-photo::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 20, 32, .5) 0%, rgba(4, 20, 32, .8) 100%); }
.jw-blog .life-categories .category-card.jw-tile-photo > * { position: relative; }
.jw-blog .life-categories .category-card.jw-tile-photo :is(h3, p) { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.jw-blog .life-categories .category-card.jw-tile-photo p { font-weight: 700; }
.jw-blog .life-categories .category-card.jw-tile-photo .icon-container { background: rgba(255, 255, 255, .94); }
.jw-blog .life-categories .category-card.jw-tile-photo:hover .icon-container { background: var(--accent-color); }

/* ---- the sidebar stays beside the list (Daniel, 2026-10-05: "the sidebar is dead below it") -------------------------------- */
/* The whole sidebar scrolls with the page until its last box is in view, then stays there while the cards go on; one shorter
   than the window stays just under the menu. blog.js measures it into --jw-side-h; nothing ever lies over anything. */
@media (min-width: 992px) {
  .jw-blog .events-2 > .sidebar { position: sticky; top: min(96px, calc(100vh - var(--jw-side-h, 0px) - 16px)); }
}

/* ---- blocks the template has no look for --------------------------------------------------------------- */
.blog-details .article-content .jw-block-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 12px; }
.blog-details .image-with-caption.left { float: left; max-width: 45%; margin: 0 24px 16px 0; }
@media (max-width: 767.98px) { .blog-details .image-with-caption.left { float: none; max-width: 100%; margin: 0 0 16px; } }
.blog-details .image-with-caption figcaption .jw-credit { display: inline; font-size: .95rem; }
.jw-gallery figure { margin: 0; }
.jw-gallery .gallery-overlay p { margin: 0; }
.jw-qa dt { font-size: 1.25rem; font-weight: 700; color: var(--heading-color); margin-top: 18px; }
.jw-qa dt::before { content: "Q  "; color: var(--accent-color); }
.jw-qa dd { margin: 6px 0 0; font-size: 1.1rem; line-height: 1.6; padding-left: 1.6rem; }
.jw-note { font-size: 1rem; color: var(--default-color); }
.jw-sailing-card .jw-range { font-size: 1.1rem; }
.jw-checklist .requirement-item .icon-box i { font-size: 1.6rem; }
.blog-details .article-content a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the AI line above the sources ---------------------------------------------------------------------- */
.jw-ai-line { font-weight: 700; font-size: 1.05rem; }

/* ---- reactions, feedback, comments ------------------------------------------------------------------------ */
.jw-react { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 6px; }
.jw-react form { margin: 0; }
.jw-react button, .jw-react .jw-count { display: inline-flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; padding: 10px 18px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 60%); border-radius: 30px; background: var(--surface-color); color: var(--heading-color); }
.jw-react button[aria-pressed="true"] { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 85%); }
.jw-react i { font-size: 1.3rem; }
.jw-box { border: 2px solid color-mix(in srgb, var(--default-color), transparent 75%); border-radius: 10px; padding: 18px 20px; margin: 18px 0; }
.jw-box h4 { font-size: 1.3rem; font-weight: 700; }
.jw-box label { font-size: 1.05rem; font-weight: 600; }
.jw-box textarea { font-size: 1.1rem; }
.jw-comment { border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); padding: 14px 0; }
.jw-comment .who { font-weight: 700; font-size: 1.1rem; }
.jw-comment .when { color: var(--default-color); font-size: 1rem; margin-left: 8px; }
.jw-comment p { font-size: 1.1rem; margin: 6px 0 0; white-space: pre-line; }
.jw-comment form { display: inline; }
.jw-comment .btn-link { font-size: 1rem; padding: 0 6px; }
.jw-held { background: #fff4d6; color: #3b2400; border-left: 6px solid #b26b00; padding: 10px 14px; font-weight: 600; }
.jw-flash { border-left: 6px solid var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 88%); padding: 10px 14px; font-weight: 700; font-size: 1.1rem; }

/* ---- the blog page: search bar and its list, sidebar, cards ------------------------------------------------- */
.jw-blog .section:has(.jw-search) { overflow: visible; position: relative; z-index: 5; }
.jw-search { position: relative; max-width: 820px; margin: 0 auto; }
.jw-search label { font-size: 1.2rem; font-weight: 700; display: block; margin-bottom: 6px; }
.jw-search .form-control { font-size: 1.25rem; padding: 14px 16px; border-width: 2px; }
.jw-search .btn { font-size: 1.15rem; font-weight: 700; padding: 0 22px; }
/* A phone: the button keeps its magnifier and gives the box its room (the placeholder was cut to "Search the b"). */
@media (max-width: 575.98px) { .jw-search .jw-search-word { display: none; } .jw-search .btn { padding: 0 18px; font-size: 1.4rem; } }
.jw-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 0; list-style: none; background: var(--surface-color);
  border: 2px solid var(--heading-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.jw-suggest li { padding: 12px 16px; font-size: 1.15rem; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); }
.jw-suggest li:last-child { border-bottom: 0; }
.jw-suggest li small { display: block; font-size: .95rem; color: var(--default-color); }
.jw-suggest li[aria-selected="true"] { background: var(--accent-color); color: var(--contrast-color); }
.jw-suggest li[aria-selected="true"] small { color: var(--contrast-color); }
.jw-results-count { text-align: center; font-size: 1.15rem; font-weight: 700; margin: 10px 0 0; }
.jw-blog .events-2 .sidebar .sidebar-item label { font-size: 1.1rem; font-weight: 700; margin: 10px 0 4px; display: block; }
.jw-blog .events-2 .sidebar .sidebar-item .form-select { font-size: 1.1rem; border-width: 2px; }
.jw-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.jw-pills a { display: inline-block; padding: 6px 14px; border: 2px solid color-mix(in srgb, var(--accent-color), transparent 55%); border-radius: 30px; font-weight: 600; font-size: 1.02rem; }
.jw-sections-list { list-style: none; padding: 0; margin: 0; font-size: 1.1rem; }
.jw-sections-list li { padding: 6px 0; }
.jw-blog .news-posts .post-img::after { background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .15) 70%); }
.jw-blog .news-posts .post-content .title a { color: #fff; font-size: 1.3rem; }
.jw-blog .news-posts .post-meta { color: #fff; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.jw-blog .related-events .related-event-item h4 { font-size: 1.15rem; font-weight: 700; }
.jw-blog .related-events .related-event-item p { font-size: 1rem; }
.jw-results-list { list-style: none; padding: 0; margin: 0; }
.jw-results-list li { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); }
.jw-results-list a { font-size: 1.3rem; font-weight: 700; }
.jw-results-list small { display: block; font-size: 1rem; color: var(--default-color); margin-top: 4px; }
.jw-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; font-size: 1.2rem; font-weight: 700; }
.jw-pages [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---- print: the article and its sources only, each source with its address ---------------------------------------- */
@media print {
  #header, #footer, .footer, .page-title, .jw-reading-tools, .jw-react, .jw-box, .share-article, .jw-similar, .table-of-contents, .scroll-top, #preloader, .jw-dev-ribbon { display: none !important; }
  .jw-sources a::after { content: " (" attr(href) ")"; font-size: .9em; }
  body { font-size: 12pt; }
  .blog-details .article-featured-image img { max-height: 9cm; width: auto; }
}