/* LoveThisPic responsive layer (v2, 2026-10-27).
   Loaded after the phone stylesheet. Phones (< 768px) keep the existing phone design;
   tablets and desktops get a centred page, a thumbnail grid that adds columns with width,
   and (>= 1024px) the sidebar beside the content. Every rule is scoped to body.responsive. */

body.responsive img { max-width: 100%; }

/* ---------- Tablets and up ---------- */
@media (min-width: 768px) {
  html, body.responsive { background: #f1f1f1; }
  body.responsive #page {
    max-width: 1200px; margin: 0 auto; background: #fff;
    box-shadow: 0 0 14px rgba(0, 0, 0, .07);
  }
  body.responsive #main { padding: 0 20px; }

  /* Thumbnail grid (replaces fixed-width floats) */
  body.responsive .picture-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px; margin: 0 0 22px; overflow: visible;
  }
  body.responsive .picture-list > li {
    float: none; width: auto; height: auto; margin: 0; padding-bottom: 0;
    aspect-ratio: 8 / 7;
  }
  body.responsive .picture-list > li > a > img.image-thumb,
  body.responsive .picture-list > li > div.blog-thumb > a > img.image-thumb {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* Sidebar stacks under the content on tablets */
  body.responsive #sidebar { float: none; width: auto; margin: 10px 0 0; }

  /* Main picture: real size, never upscaled (template sets width:100% inline for phones) */
  body.responsive .tumblImg .view-image {
    width: auto !important; max-width: 100% !important; height: auto !important;
    display: block; margin: 0 auto;
  }
  /* On picture/video pages the inner box is centred at a readable width.
     (#main itself also carries the item-view class, so it must NOT be limited.) */
  body.responsive #main.item-view { max-width: none; }
  body.responsive #content .item-view { max-width: 860px; margin-left: auto; margin-right: auto; }
  body.responsive #content .innerBg { float: none; width: auto; }

  /* Blog posts: larger title and text */
  body.responsive #main.blog h1.title { font-size: 26px; line-height: 1.25; padding: 12px 0 8px; }
  body.responsive .blog .description,
  body.responsive .step-instructions { font-size: 16px; line-height: 1.55; }
  body.responsive #main.blog .step-image img { width: 100%; height: auto; }
}

/* ---------- Desktops ---------- */
@media (min-width: 1024px) {
  body.responsive #main { display: flex; align-items: flex-start; gap: 28px; }
  body.responsive #content { flex: 1 1 auto; min-width: 0; }
  body.responsive #sidebar { flex: 0 0 300px; width: 300px; margin-top: 6px; }
  body.responsive #sidebar:not(:has(*)) { display: none; }
  body.responsive #sidebar .picture-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Full-width row under list pages for sidebar blocks moved by ltp-responsive.js */
  body.responsive #ltp-below { clear: both; padding: 10px 20px 20px; }
  body.responsive #ltp-below .picture-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  body.responsive #content .paging2 { margin: 10px 0 24px; text-align: center; }
}

/* Profile pages have no #content/#sidebar: #main holds only .profile-content.
   Give it the full row (it was shrinking to ~200px inside the flex row) at a readable width. */
@media (min-width: 768px) {
  body.responsive #main > .profile-content { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; }
  body.responsive .profile-content .profile-top { overflow: hidden; }
  body.responsive .profile-content .profile-stats { margin-top: 0; }
  body.responsive .profile-content .profile-image-cont img { top: -50px; }
  body.responsive .profile-content .customSelect { width: auto; max-width: 320px; }
}

/* Blog posts: related posts moved under the article by ltp-responsive.js */
@media (min-width: 1024px) {
  body.responsive #ltp-related { clear: both; margin: 24px 0; }
  body.responsive #ltp-related .sidebar-box { float: none; width: auto; margin: 0 0 16px; }
  body.responsive #ltp-related h2, body.responsive #ltp-related h3 { text-align: center; margin: 0 0 12px; }
  body.responsive #ltp-related .similar-images,
  body.responsive #ltp-related .more-by-author { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  body.responsive #ltp-related .similar-images > h3,
  body.responsive #ltp-related .more-by-author > h3 { grid-column: 1 / -1; }
  body.responsive #ltp-related .small-image-container { width: auto !important; height: auto !important; margin: 0 !important; padding-bottom: 0 !important;
    position: relative; overflow: hidden; aspect-ratio: 6 / 5; display: block; }
  body.responsive #ltp-related .small-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
  body.responsive #ltp-related .view-more-similar-images { text-align: center; margin-bottom: 20px; }
}

/* "Uploaded by <name>" line on picture pages (restored from the old desktop design) */
body.responsive .uploaded-by { text-align: center; font-size: 13px; margin: 6px 0 2px; color: #555; }
body.responsive .uploaded-by span { margin-right: 4px; }
body.responsive .uploaded-by a, body.responsive #main.blog .created a { color: #e64946; text-decoration: none; }
body.responsive .uploaded-by a:hover, body.responsive #main.blog .created a:hover { text-decoration: underline; }


/* ---------- AdSense placement safety (2026-10-27) ----------
   Clear space between ads and buttons/links (paging, sort, share, author link) to avoid accidental
   clicks, per AdSense ad placement policy. Ads themselves are never hidden, cropped or resized. */
body.responsive .center-ad { margin-top: 28px; margin-bottom: 28px; }
body.responsive .paging + .center-ad,
body.responsive br.clear + .center-ad,
body.responsive #sidebar > .center-ad:first-child { margin-top: 56px; }
/* padding, not margin: adjacent vertical margins collapse (28px + 28px would show as 28px) */
body.responsive .center-ad + .sort-box,
body.responsive .center-ad + .filter-box,
body.responsive .heading + .sort-box { padding-top: 28px; }
body.responsive .ad-holder .ad-label { font-size: 11px; }
/* Reserve the usual height of the top ad on wide screens so the page does not jump when it fills */
@media (min-width: 1024px) {
  body.responsive #content .ad-holder-screen-wide { min-height: 280px; }
  /* AdSense sizes an ad to its slot's width at the moment it loads. The sidebar is later in the page,
     so at that moment #content is still full width and the ad came out too wide (cut off at the right,
     or spilling under the sidebar). Give every in-content ad slot, from the start, the width the
     column will finally have: page (max 1200px) - side padding - sidebar 300px - gap - scrollbar. */
  body.responsive #content .ad-holder {
    /* fixed from the start and always narrower than the final column (which is
       page - 2x20px padding - sidebar 300px - two 28px flex gaps = 804px at full width) */
    width: calc(min(1200px, 100vw) - 420px); max-width: 100%;
    margin-left: auto; margin-right: auto;
  }
  /* close the ad box at the sides on computers (phones keep the edge-to-edge look) */
  body.responsive #content .ad-holder-screen-wide { border-left: 1px solid lightgray; border-right: 1px solid lightgray; }
}

/* The phone theme clears floats in the list heading with overflow:hidden, which also clipped the ad
   placed inside it (and would crop full-width ads on phones). flow-root clears floats without clipping. */
body.responsive #content > .heading { overflow: visible; display: flow-root; }


/* Desktop-only sidebar ad (Website 300 x 600). Hidden below 1024px with display:none on the ins
   (AdSense's documented method for hiding responsive units; hidden units are not requested). */
.adsbygoogle.ltp-desktop-only { display: none; }
body.responsive .ltp-desktop-ad { display: none; }
@media (min-width: 1024px) {
  .adsbygoogle.ltp-desktop-only { display: block; width: 300px; min-height: 250px; margin: 0 auto; }
  body.responsive .ltp-desktop-ad { display: block; margin: 28px 0; }
  body.responsive #sidebar .ltp-desktop-ad .ad-holder { width: 300px; margin: 22px auto 0; }
}

/* Keep the top bars above page content (thumbnails were painting over the floating header) */
body.responsive .m-header-holder { z-index: 1000; }
body.responsive #floating-header { z-index: 1001; }
@media (min-width: 1024px) {
}

/* Upload box from /js/ltp.js (2026-10-27): above the fixed header, and fitted to phone screens */
body.responsive #ltpPopup.loveThisPopup { z-index: 10050; }
@media (max-width: 680px) {
  body.responsive #ltpPopup.loveThisPopup { left: 2vw !important; width: 96vw; max-width: 96vw; box-sizing: border-box; }
  body.responsive #ltpPopup.loveThisPopup .ltpLeft { position: static; margin: 0 0 10px; text-align: center; }
  body.responsive #ltpPopup.loveThisPopup .ltpRight { padding-left: 0; }
  body.responsive #ltpPopup.loveThisPopup .ltpRight input[type=text],
  body.responsive #ltpPopup.loveThisPopup .ltpRight select,
  body.responsive #ltpPopup.loveThisPopup .ltpRight .ltpSaveAs input,
  body.responsive #ltpPopup.loveThisPopup .ltpRight .ltpSaveAs select,
  body.responsive #ltpPopup.loveThisPopup .ltpRight .ltpTags input,
  body.responsive #ltpPopup.loveThisPopup .ltpRight .ltpSourceLink input,
  body.responsive #ltpPopup.loveThisPopup .ltpRight .ltpWatermark .ltpWatermarkSelect { float: none; width: 100%; box-sizing: border-box; font-size: 16px; }
  body.responsive #ltpPopup .ltpFacebookImageUpload input[type=file] { padding-left: 0; }
}