/* Responsive overrides for the legacy fixed-width 980px layout.
   Loaded after all other legacy stylesheets so it wins the cascade.
   Three breakpoints: 1024 (fluid container), 768 (stack sidebar), 480 (tighten). */

/* Universal safety nets — table only. The `img { max-width:100% }` belt
   lives inside the media queries below: applying it globally breaks Nivo's
   slice animation on desktop (it needs fixed image dimensions). */
table { max-width: 100%; }

/* ============================================================
   ≤ 1024px — drop fixed 980/745/220 widths, go fluid
   ============================================================ */
@media (max-width: 1024px) {
  img { max-width: 100%; height: auto; }
  #wrapper { width: 100% !important; max-width: 980px; box-sizing: border-box; padding: 0 12px; }
  #headerpart,
  #navigationpart,
  #centerpart { width: 100% !important; box-sizing: border-box; }

  #leftpart { width: 30% !important; margin-right: 2% !important; box-sizing: border-box; }
  #rightpart { width: 68% !important; box-sizing: border-box; }

  #bannerpart,
  .bannerbg,
  .adbanner,
  .mainslider .sliderbg,
  .mainslider .sliderttl { width: 100% !important; box-sizing: border-box; }

  /* Nivo slider — the plugin sets fixed pixel width/height on #slider from the
     first image's natural 745×232. Constrain the wrapper and hide additional
     slides on mobile (Nivo positions them absolutely; if init fails they stack
     at natural size and visually blow the banner up). */
  #bannerpart { aspect-ratio: 745 / 232; height: auto !important; overflow: hidden; }
  .slider-wrapper,
  #slider,
  .nivoSlider { width: 100% !important; height: 100% !important; }
  #slider > img,
  #slider > a { width: 100% !important; height: 100% !important; object-fit: cover; }
  /* Show only the first slide on mobile */
  #slider > img ~ img,
  #slider > img ~ a,
  #slider > a ~ img,
  #slider > a ~ a { display: none !important; }

  .footerwrapper { width: 100% !important; max-width: 980px; box-sizing: border-box; padding: 0 12px; }
  #footercontent,
  #footerlinks { width: 100% !important; box-sizing: border-box; }
}

/* ============================================================
   ≤ 768px — stack content first / sidebar below, wrap nav, shrink header
   ============================================================ */
@media (max-width: 768px) {
  #wrapper { display: block !important; padding: 0 8px; }

  /* Put main content above the sidebar on mobile (sidebar is long).
     #centerpart contains <LeftSidebar /> then {children}. */
  #centerpart { display: flex !important; flex-direction: column-reverse; }

  /* Header: logo + search wrap */
  #headerpart { height: auto !important; padding-bottom: 8px; }
  .logo { float: none !important; margin: 8px auto !important; }
  .searcharea { float: none !important; clear: both; }
  .topsearch { float: none !important; width: 100% !important; margin: 8px 0; }
  .topsearch input[type="text"] { width: calc(100% - 70px) !important; box-sizing: border-box; }
  .toplaungage { float: none !important; padding: 4px 0; }

  /* Nav: wrap items, allow multiline */
  #navigationpart { height: auto !important; }
  ul.navi { display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
  ul.navi li { float: none !important; display: block; flex: 0 0 auto; background-image: none !important; padding: 0 !important; }
  ul.navi li a { display: block; padding: 8px 12px; line-height: normal; }

  /* Layout: stack */
  #centerpart { padding: 8px 0 !important; }
  #leftpart,
  #rightpart { width: 100% !important; float: none !important; margin: 0 0 12px 0 !important; }

  /* Book slider thumbnails wrap — beat styles.css `.slides_container > div { width: 745px }`
     and reset legacy `ul.slider li { margin: 0 20px 0 0; width: 140px }`. */
  div.brandslider .slides_container,
  div.review_slider .slides_container { width: 100% !important; }
  div.brandslider .slides_container > div,
  div.review_slider .slides_container > div { width: 100% !important; display: block !important; }
  ul.slider { width: 100% !important; display: flex !important; flex-wrap: wrap; justify-content: center; padding: 0 !important; }
  ul.slider li { float: none !important; width: 44% !important; margin: 6px !important; box-sizing: border-box; min-height: 0 !important; }
  ul.slider li img.thumbimg { width: 66px !important; height: 66px !important; }

  /* Listview cards (book listings) */
  .listcol1,
  .listcol2,
  .listcol3 { float: none !important; width: 100% !important; box-sizing: border-box; }

  /* Footer */
  #footercontent,
  #footerlinks { padding: 12px 8px !important; height: auto !important; line-height: 1.5 !important; text-align: center; }
  ul.socialicon { float: none !important; display: inline-block; margin: 8px 0 !important; }
  .footerwrapper > div,
  .footerwrapper > ul { float: none !important; width: 100% !important; padding: 4px 0 !important; }

  /* Newsletter form */
  .newsletter input[type="text"],
  .newsletter input[type="email"] { width: calc(100% - 50px) !important; box-sizing: border-box; }

  /* Comments */
  #commentarea img { float: left; margin-right: 8px; }
}

/* ============================================================
   ≤ 480px — phones: single-column thumbs, smaller paddings
   ============================================================ */
@media (max-width: 480px) {
  #wrapper { padding: 0 4px; }
  ul.slider li { width: 90% !important; }
  ul.navi li a { padding: 6px 10px; font-size: 12px; }
  h1 { font-size: 20px !important; line-height: 1.3; }
  h2 { font-size: 17px !important; }
  /* Long URLs / Sanskrit content shouldn't blow up the layout */
  #rightpart, #rightpart p, #rightpart div { word-wrap: break-word; overflow-wrap: break-word; }
}