/* ==============================================================
   Custom overrides for ja_teline_v  (loaded automatically by T3)
   ============================================================== */

/* JComments -- anchor offset for the sticky header.
   The "Add comment" link is a plain #addcomments hash anchor. On desktop
   T3 pins .t3-topbar (30px) and #t3-mainnav (48px) with position:fixed,
   so the browser jump lands with the top of the comment form hidden
   underneath them. T3 drops .affix on small screens, which is why the
   problem only shows on wide viewports. Offset the jump target so the
   "Add comment" heading and the first field clear the bars. */
@media (min-width: 992px) {
  #jc a#addcomments,
  #jc [id^="comment-"] {
    scroll-margin-top: 150px;
  }
}

/* Image captions -- smaller caption text under article images. */
.article-intro-media .item-image > div,
.article-content span.wf_caption,
.article-content .wf_caption,
.item-page span.wf_caption,
.article-content p.img_caption,
.item-page p.img_caption {
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile/tablet gap above the content (<= 992px, where #t3-header is fixed).
Two causes: (1) .t3-spotlight has min-height 53px + 7px padding and its empty
grid columns still generate whitespace line boxes; (2) the sub-menu module's
"hidemobile" suffix lands on the inner list only, so the module wrapper keeps
its 36px top margin and borderhead rule. With the spotlight collapsed,
.t3-wrapper must reserve the fixed header's height itself. */
@media (max-width: 992px) {
    .t3-wrapper { padding-top: 53px; }
    .t3-sl-1 .t3-spotlight { min-height: 0; padding-top: 0; padding-bottom: 0; }
    .t3-sl-1 .t3-spotlight,
    .t3-sl-1 .t3-spotlight > div { font-size: 0; line-height: 0; }
    .t3-sl-1 .t3-module { font-size: 1rem; line-height: 1.7; margin-top: 8px; }
    .t3-sl-1 .t3-module.submenu { display: none; }
}

/* The 300x90 AdSense unit above the article (Custom HTML module rendered into
#t3-content with the "topad970" suffix) is a mobile-only placement. Hidden from
993px up, where the desktop layout starts; the container has no width there, so
adsbygoogle skips the request instead of burning an unviewable impression. */
@media (min-width: 993px) {
    #t3-content .custom.topad970 { display: none; }
}

/* "You may also like" (RAXO Related Articles, position article-bottom) is a
2-up float grid on phones: raxo-columns.css sets .raxo-wrapper to width 50%
and only drops to 100% below a 320px CONTAINER width, which never happens.
RAXO's script also pins an inline equal-row height on each wrapper, hence the
!important. One card per row, image full-bleed. Tablet and desktop untouched. */
@media (max-width: 767px) {
    .raxo-related-articles .raxo-wrapper { width: 100% !important; float: none; height: auto !important; margin-bottom: 18px; }
    .raxo-related-articles .raxo-wrapper > div { height: auto; overflow: visible; }
    .raxo-related-articles .raxo-img { overflow: hidden; }
    .raxo-related-articles .raxo-img img { float: none; width: 100%; height: auto; }
}