/**
 * print.css — print stylesheet for /news/ pages.
 *
 * Linked from templates/html_header.tpl.php with media="print", so the
 * browser only fetches and applies it when the user actually prints.
 * No @media print wrapping needed — every rule in this file IS already
 * print-only.
 *
 * Strategy:
 *   1. Hide everything outside the article being printed (header,
 *      footer, ads, sidebars, popups, related/recommended blocks,
 *      cookie banners, etc.).
 *   2. On the article(s) themselves, hide non-content widgets — share
 *      buttons, "Follow Trend on" social block, infinite-scroll
 *      loaded sibling articles, image carousels' decorative chrome.
 *   3. Multi-article hiding: assets/js/social_share.js adds
 *      `.is-printing` to the SPECIFIC <div class="article"> the user
 *      clicked Print on. CSS hides every .article that isn't tagged
 *      so AJAX-loaded neighbours don't bleed into the print output.
 *      The class is removed via window.afterprint after the dialog
 *      closes.
 *   4. Aesthetic cleanup — force white background, black text,
 *      readable serif body type, generous line-height, and avoid
 *      bad page-breaks (orphans/widows, page-break-inside: avoid for
 *      headings and images).
 *
 * Conventions intentionally NOT done here:
 *   - No "Source: <url>" footer printed via ::after. The page URL is
 *     usually printed by the browser itself in the header/footer
 *     margins; duplicating it inside the body is noisy.
 *   - Inline links keep their text only (no "(<url>)" appended) —
 *     news copy has too many external links to make appended URLs
 *     readable; the printed page would balloon.
 */

/* ---------------------------------------------------------------------------
 * Page setup
 * ------------------------------------------------------------------------- */
@page {
    margin: 1.6cm 1.4cm;
}

html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11pt;
    line-height: 1.5;
}

/* No animations / transitions during print rendering. */
*, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Hide site chrome + non-article surfaces
 *
 * One large selector list — keeps the rule a single specificity bump
 * rather than dozens of separate `display: none` declarations. New
 * elements that need hiding are added to this list.
 * ------------------------------------------------------------------------- */
header,
footer,
nav,
aside,
.header-wrapper,
.footer-wrapper,
.header-v2,
.header-v2-wrapper,
.header-v2-mobile,
.header-v2-bar,
.header-v2-search,
.header-v2-lang,
.header-v2-login,
.search-modal-overlay,
.read-news-on,
.social-sharing,
.recommended-news,
.related-news,
.related-articles,
.banner-on-visible,
.banner,
.adsbygoogle,
.adsense,
[id*="GAM_"],
[id*="TREND_slot_"],
[class*="gpt-slot"],
[class*="ad-block"],
[class*="adv-"],
.adv-wrapper-horizontal,
.trend-trial-popup-root,
.paywall-v2,
#paywall_v2,
.cookie-banner,
.cookie-policy-banner,
.fb-comments,
.fb-comment-embed,
.comments,
.comments-block,
.sidebar,
.right-sidebar,
.left-sidebar,
.thumbs-gallery,
.swiper-prev,
.swiper-next,
.swiper-pagination,
.article .left-part,
.article .author,
.article .tags,
.no-title-block .small-logo,
.image-copyright,
/* Page-level layout chrome */
main .grid > .right-column,
main .grid > .column-span-2,
#more_news_loader,
.breadcrumbs,
/* Floating "open latest news" panel + its trigger button */
.side-news-list-btn,
.side-news-list {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Multi-article hiding
 *
 * News pages render multiple <div class="article"> blocks (infinite
 * scroll inserts new ones via AJAX as the user reads). On Print, we
 * want only the specific article the user clicked Print on, not all
 * neighbours.
 *
 * social_share.js tags two things on click:
 *   - .is-printing on the SPECIFIC <div class="article"> we want
 *   - .is-printing-article on <body> as a top-level signal
 *
 * CSS uses the body class as the parent selector so every other
 * .article hides — no :has() required, works in all browsers.
 *
 * Both classes are cleared via the window `afterprint` event once
 * the print dialog closes (with a setTimeout fallback for browsers
 * that skip afterprint).
 *
 * Fallback if JS fails (no class on body): nothing happens here,
 * the user just gets the previous behaviour (everything prints).
 * Better than a blank page on JS-broken paths.
 * ------------------------------------------------------------------------- */
body.is-printing-article .article:not(.is-printing) {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Article content — typography + layout cleanup
 *
 * Two grid containers exist on the news page that we need to flatten:
 *   1. main.news .grid           — page-level 2-col grid (article | sidebar).
 *                                  Sidebar is hidden above; we also force
 *                                  the grid itself to display:block so the
 *                                  article column stretches to full page
 *                                  width instead of staying in its 3fr
 *                                  track with a 300px gap on the right.
 *   2. .article (internal grid)  — 2-col grid (55px social gutter | content).
 *                                  Social gutter is hidden above; we also
 *                                  force this grid to display:block so the
 *                                  content (.right-part) takes the whole
 *                                  width instead of leaving 55px of empty
 *                                  space on the left.
 *
 * display:none on the hidden columns is NOT enough — CSS Grid still
 * reserves their tracks even when the grid item isn't rendered. Hence
 * we kill the grid container's display mode itself.
 * ------------------------------------------------------------------------- */
main.news .grid,
main .grid,
.container,
main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}
main .grid > .left-column,
main .grid > .left-column.ov {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Drop the desktop 3-column grid (top / right) — print as a single
   linear flow. .left-part (social gutter) is hidden in the chrome
   list above; we don't restate it here so the hide rule stays the
   last word for that selector. */
.article .top-part,
.article .right-part,
.article .article-paddings,
.article .article-content,
.article .image-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8pt !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    grid-column: auto !important;
}

/* Headline + meta */
.article h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22pt;
    line-height: 1.2;
    font-weight: 700;
    color: #000 !important;
    margin: 0 0 6pt !important;
    page-break-after: avoid;
    break-after: avoid;
}
.article h1 .premium-badge,
.article h1 [class*="premium-badge"] {
    display: none !important;
}

.article .meta {
    display: block;
    font-size: 9pt;
    color: #555 !important;
    margin: 0 0 4pt;
}
.article .meta span + span::before {
    content: " · ";
    color: #999;
}
.article .meta a {
    color: inherit !important;
    text-decoration: none !important;
}

.article .excerpt {
    font-size: 13pt;
    font-weight: 600;
    line-height: 1.4;
    color: #222 !important;
    margin: 8pt 0 14pt;
    padding: 0;
    border: none;
}

/* Lead/title image */
.article .image-wrapper img,
.article-content img {
    max-width: 100% !important;
    height: auto !important;
    margin: 8pt 0;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Article body */
.article-content {
    font-size: 11pt;
    line-height: 1.55;
    color: #000 !important;
}
.article-content p {
    margin: 0 0 8pt !important;
    orphans: 3;
    widows: 3;
}
.article-content h2,
.article-content h3,
.article-content h4 {
    color: #000 !important;
    margin-top: 12pt !important;
    margin-bottom: 6pt !important;
    page-break-after: avoid;
    break-after: avoid;
}
.article-content blockquote {
    margin: 10pt 1.5em;
    padding-left: 1em;
    border-left: 2pt solid #888;
    font-style: italic;
    page-break-inside: avoid;
    break-inside: avoid;
}
.article-content a {
    color: #000 !important;
    text-decoration: underline;
}
.article-content ul,
.article-content ol {
    margin: 0 0 8pt 1.4em;
}

/* Image gallery — print as a vertical stack of full-width images
   instead of the swiper carousel. Decorative thumbs are hidden via
   the chrome list at the top. */
.article-gallery .swiper-container,
.article-gallery .swiper-wrapper {
    display: block !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
}
.article-gallery .swiper-slide,
.article-gallery .gallery-slide {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 8pt 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
}
.article-gallery img {
    max-width: 100% !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
 * Print-only branding (header logo + footer source/copyright)
 *
 * Both elements live inside .article in the news_content templates with
 * inline display:none so they don't render on screen. We flip them to
 * block here under media=print, with !important to beat the inline
 * style (specificity-wise inline styles win, but !important from a
 * stylesheet still beats inline non-!important).
 *
 * Header — logo image + thin separator line. The img is sized via
 * height:50px instead of width: so wide headlines and tall logos both
 * render at a consistent visual weight. Logo loads from /assets so a
 * cached page being printed offline still gets the asset from the
 * browser cache rather than missing.
 *
 * Footer — source URL (so a paper reader can find the original) plus
 * the standard "© Trend News Agency. All rights reserved." line. URL
 * is rendered as plain text (not <a>) so screen readers and the
 * printed page treat it identically.
 * ------------------------------------------------------------------------- */
.article .print-branding-header {
    display: block !important;
    margin: 0 0 14pt;
    padding: 0 0 10pt;
    border-bottom: 1px solid #cccccc;
    page-break-after: avoid;
    break-after: avoid;
}
.article .print-branding-header .print-branding-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 200px;
    margin: 0;
}

.article .print-branding-footer {
    display: block !important;
    margin: 18pt 0 0;
    padding: 8pt 0 0;
    border-top: 1px solid #cccccc;
    font-size: 9pt;
    line-height: 1.4;
    color: #555555;
    page-break-inside: avoid;
    break-inside: avoid;
}
.article .print-branding-footer p {
    margin: 0 0 3pt;
}
.article .print-branding-footer .print-source {
    word-break: break-all;
    color: #333333;
}
.article .print-branding-footer .print-source strong {
    color: #000000;
    margin-right: 2pt;
}
.article .print-branding-footer .print-copyright {
    color: #666666;
    font-style: italic;
}

/* Trend script footer block (the JSON-LD <script> + page-state assigns
   from news_content) emits no visible output but some browsers print
   blank vertical space if `<script>` styles inherit display:block.
   Force display:none on script as a defensive measure. */
script {
    display: none !important;
}