/**
 * Responsive Overrides — Blewspaper
 *
 * Breakpoint-specific layout adjustments. Loaded last to override
 * base styles defined in blewspaper.css. Uses max-width (desktop-first)
 * queries matching the original design approach.
 *
 * @package    Blewspaper
 * @author     AnKish
 * @version    1.0.0
 * @since      2026-02-13
 *
 * Breakpoint Map:
 *   950px  — Video rotated heading hidden
 *   800px  — Comments stack, snippets two-column, small sidebar hidden
 *   600px  — Content and footer go single-column
 *   600-1000px — Widget image thumbnails expand to full width
 */


/* ==========================================================================
   Breakpoint: 950px
   ==========================================================================
   Hides the vertically-rotated heading adjacent to the video embed.
   The heading becomes unreadable at narrower widths due to its large
   font size and absolute positioning.
   ========================================================================== */

@media only screen and (max-width: 950px) {
  .wrap .content .main-column .inner-row .video + h1 {
    display: none;
  }
}


/* ==========================================================================
   Breakpoint: 800px
   ==========================================================================
   Comment section switches to stacked layout with the form on top
   (column-reverse). Post snippet cards go two-column. Home snippets
   stack vertically. The compact sidebar variant is hidden entirely.
   Card headings and excerpts are reduced for space.
   ========================================================================== */

@media only screen and (max-width: 800px) {
  .comm.ent {
    flex-direction: column-reverse;
  }  
  .comform {
    position: relative;
    flex: 1;
    align-self: auto;
  }
  .psnippets .recurse {
    flex: 0 1 48%;  
  }
  .homesnippet .hsrecursive {
    flex-direction: column;
  }
  .sidebar.s {
    display: none;
  }
  .recurse.col-1 h4 {
    font-size: 1.4rem;
  }
  .recurse.col-1 p {
    display: none;
  }
}


/* ==========================================================================
   Breakpoint: 600px
   ==========================================================================
   Full single-column layout. The content/sidebar flex grid and the footer
   both collapse to vertical stacking.
   ========================================================================== */

@media only screen and (max-width: 600px) {
  .content {
    flex-direction: column;
  }
  footer.footer {
    flex-direction: column;
  }
}


/* ==========================================================================
   Breakpoint: 600px–1000px (tablet range)
   ==========================================================================
   Widget recursive items with the .two variant switch to vertical stacking
   so that thumbnail images can expand to full container width rather than
   being constrained to inline layout.
   ========================================================================== */

@media only screen and (min-width: 600px) and (max-width: 1000px) {
  .tiorecursive.two {
    flex-direction: column;
    border: none;
  }
  .tiorecursive.two .counter {
    flex: 1;
  }
  .tiorecursive.two .counter img {
    max-width: 100%;
  }
}