/* ==========================================================================
   Anime Archive - Responsive Design & Display Optimization System
   Comprehensive Breakpoints:
   - < 320px: Ultra-compact feature phones (KaiOS, JioPhone, etc.)
   - 320px: Small phone displays (iPhone SE 1st gen, feature phone target)
   - 375px: Standard mobile displays (iPhone 6/7/8/X/11/12 mini)
   - 425px: Large mobile displays (Android flagships, Plus/Max/Pro Max)
   - 768px: Tablet portrait displays (iPads, Android tablets)
   - 1024px: Desktop / Tablet landscape displays
   - 1440px: Widescreen / High-res laptop & desktop displays
   - Between 1440px & 2560px:
     * 1600px: Mid-large desktop displays
     * 1920px: 2K / Full HD 1080p desktop displays
   - 2560px: 2.5K / QHD 1440p displays
   - 3000px: 3K displays (Surface Laptop, Retina 3K, 3200x1800)
   - 3440px: 3.5K Ultrawide displays (UWQHD 3440x1440)
   - 3840px: 4K UHD displays (3840x2160 & above)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base Responsive Foundation & Utility Styles
   -------------------------------------------------------------------------- */
:root {
  --app-max-content-width: 100%;
}

/* Ensure smooth fluid container padding */
.container.is-fluid {
  padding-left: clamp(8px, 1.8vw, 24px) !important;
  padding-right: clamp(8px, 1.8vw, 24px) !important;
}

/* Download button text visible by default; shrinks to icon only below 320px */
.download-btn-text {
  display: inline;
}

/* Centered search container on medium/large screens */
.navbar-search-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Video container responsive bounds for ultra-clean playback area */
#videoContainer {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Ensure full-width notice columns inside #animeGrid are centered and never shrunk by card grid */
#animeGrid > .grid-notice-col,
#animeGrid > .column.is-12 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: block !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Card Top Series Title - Fixed 2 lines with ellipsis for grid equality
   -------------------------------------------------------------------------- */
.anime-card-title-box {
  height: 2.75rem;
  max-height: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
  border-bottom: 1px solid var(--bulma-border-weak);
  box-sizing: border-box;
}

.anime-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bulma-card-color, var(--bulma-text, inherit));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  margin: 0;
  width: 100%;
}

/* Single unified skeleton covering both title and image area */
.anime-card-skeleton-cover {
  width: 100%;
  height: 0;
  padding-top: calc((100% * 7 / 5) + 2.75rem);
  display: block;
  position: relative;
}

/* Custom Genre & Series Type Colors */
.tag.tag-genre-yuri,
.tag-genre-yuri {
  background-color: #FF95A5 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.tag.tag-type-special,
.tag-type-special {
  background-color: #76C457 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   1. Breakpoint: < 320px (Ultra-compact / Feature Phones / KaiOS / JioPhone)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 319px) {
  html {
    font-size: 13.5px;
  }

  /* Shrink download button to icon only on tiny feature phones */
  .download-btn-text {
    display: none !important;
  }

  /* Navbar compact adjustments */
  .navbar .buttons.has-addons .button {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* 2 cards per row on tiny screens */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 50% !important;
  }

  /* Episode preview cards in info.html */
  .episode-card-col {
    flex: none !important;
    width: 50% !important;
  }
}

/* --------------------------------------------------------------------------
   2. Breakpoint: 320px (Small Mobile / Feature Phone Standard / iPhone SE 1)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 320px) {
  html {
    font-size: 14px;
  }

  /* Download button with full text "Download" is VISIBLE at 320px and above */
  .download-btn-text {
    display: inline !important;
  }

  /* 2 cards per row */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 50% !important;
  }

  .episode-card-col {
    flex: none !important;
    width: 33.3333% !important;
  }
}

/* --------------------------------------------------------------------------
   3. Breakpoint: 375px (Standard Mobile / iPhone X, 11, 12, 13 mini)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 375px) {
  html {
    font-size: 14.5px;
  }

  .download-btn-text {
    display: inline !important;
  }

  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 50% !important;
  }
}

/* --------------------------------------------------------------------------
   4. Breakpoint: 425px (Large Mobile / iPhone Plus & Max, Android Flagships)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 425px) {
  html {
    font-size: 15px;
  }

  .download-btn-text {
    display: inline !important;
  }

  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 50% !important;
  }
}

/* --------------------------------------------------------------------------
   5. Breakpoint: 768px (Tablet Portrait / iPads)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  html {
    font-size: 15.5px;
  }

  .download-btn-text {
    display: inline !important;
  }

  /* 3 cards per row on tablet portrait */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 33.3333% !important;
  }

  .episode-card-col {
    flex: none !important;
    width: 25% !important;
  }
}

/* --------------------------------------------------------------------------
   6. Breakpoint: 1024px (Desktop Standard / Tablet Landscape)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  html {
    font-size: 16px;
  }

  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 960px !important;
  }

  /* Centered search input */
  .navbar-search-wrapper {
    max-width: 680px;
    margin: 0 auto;
  }

  /* 4 cards per row on standard desktop */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 25% !important;
  }

  /* Metadata row on info.html forms a clean horizontal row */
  .info-meta-columns {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .info-meta-item {
    flex: 1 1 0 !important;
    min-width: 110px !important;
  }

  .episode-card-col {
    flex: none !important;
    width: 16.6666% !important;
  }
}

/* --------------------------------------------------------------------------
   7. Breakpoint: 1216px (Widescreen Step 1)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1216px) {
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 1152px !important;
  }

  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 16.6666% !important; /* 6 cards per row */
  }
}

/* --------------------------------------------------------------------------
   8. Breakpoint: 1440px (Widescreen Step 2 / Large Desktop Monitors)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
  html {
    font-size: 16px;
  }

  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 1380px !important;
  }

  .navbar-search-wrapper {
    max-width: 780px;
    margin: 0 auto;
  }

  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 16.6666% !important; /* 6 cards per row */
  }

  .episode-card-col {
    flex: none !important;
    width: 14.2857% !important; /* 7 episodes per row */
  }
}

/* ==========================================================================
   INTERMEDIATE BREAKPOINTS (Between 1440px and 2560px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. Breakpoint: 1600px (Mid-Large Desktop / 1600x900, 1680x1050 Displays)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1600px) {
  html {
    font-size: 16.5px;
  }

  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 1540px !important;
  }

  .navbar-search-wrapper {
    max-width: 840px;
    margin: 0 auto;
  }

  /* 7 cards per row (~220px per card) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 14.2857% !important;
  }

  .episode-card-col {
    flex: none !important;
    width: 14.2857% !important;
  }
}

/* --------------------------------------------------------------------------
   10. Breakpoint: 1920px (2K / Full HD 1080p Desktop Displays)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {
  html {
    font-size: 17px;
  }

  /* Expands container from Bulma's 1344px limit to 1840px */
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 1840px !important;
  }

  .navbar-search-wrapper {
    max-width: 920px;
    margin: 0 auto;
  }

  /* 8 cards per row (~225px wide each) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 12.5% !important;
  }

  /* Info page 2K layout */
  .info-poster-col {
    flex: none !important;
    width: 22% !important;
    max-width: 380px !important;
  }
  .info-details-col {
    flex: 1 1 auto !important;
    max-width: calc(100% - 380px) !important;
  }
  .episode-card-col {
    flex: none !important;
    width: 12.5% !important; /* 8 episodes per row */
  }
  .gallery-strip-col {
    flex: none !important;
    width: 20% !important; /* 5 preview thumbnails */
  }

  /* Watch page 2K layout */
  .watch-main-container {
    max-width: 1920px;
    margin: 0 auto;
  }
  .watch-player-col {
    flex: none !important;
    width: 70% !important;
  }
  .watch-playlist-col {
    flex: none !important;
    width: 30% !important;
  }
  #videoContainer {
    max-height: calc(100vh - 200px);
    max-width: calc((100vh - 200px) * 16 / 9);
    margin: 0 auto;
  }
  #playlistItems {
    max-height: calc(100vh - 200px) !important;
  }

  .comments-drawer-content {
    width: min(480px, 30vw);
  }
  body.has-fixed-top-nav,
  body {
    padding-top: 54px;
  }
}

/* ==========================================================================
   HIGH-RESOLUTION ULTRA-WIDE & 4K BREAKPOINTS (2560px, 3000px, 3440px, 3840px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Breakpoint: 2560px (2.5K / QHD 1440p Displays)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 2560px) {
  html {
    font-size: 18px;
  }

  /* Expands container to 2460px */
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 2460px !important;
  }

  .navbar-search-wrapper {
    max-width: 1040px;
    margin: 0 auto;
  }

  /* 10 cards per row (~240px wide each) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 10% !important;
  }

  /* Info page 2.5K layout */
  .info-poster-col {
    flex: none !important;
    width: 18% !important;
    max-width: 420px !important;
  }
  .info-details-col {
    flex: 1 1 auto !important;
    max-width: calc(100% - 420px) !important;
  }
  .episode-card-col {
    flex: none !important;
    width: 10% !important; /* 10 episodes per row */
  }
  .gallery-strip-col {
    flex: none !important;
    width: 16.6666% !important; /* 6 preview thumbnails */
  }

  /* Watch page 2.5K layout */
  .watch-main-container {
    max-width: 2500px;
    margin: 0 auto;
  }
  .watch-player-col {
    flex: none !important;
    width: 72% !important;
  }
  .watch-playlist-col {
    flex: none !important;
    width: 28% !important;
  }
  #videoContainer {
    max-height: calc(100vh - 200px);
    max-width: calc((100vh - 200px) * 16 / 9);
    margin: 0 auto;
  }
  #playlistItems {
    max-height: calc(100vh - 200px) !important;
  }

  .comments-drawer-content {
    width: min(520px, 28vw);
  }
  .modal-card {
    max-width: 720px;
  }
  body.has-fixed-top-nav,
  body {
    padding-top: 58px;
  }
}

/* --------------------------------------------------------------------------
   12. Breakpoint: 3000px (3K Displays / Surface Laptop / Retina 3K / 3200x1800)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 3000px) {
  html {
    font-size: 19px;
  }

  /* Expands container to 2880px */
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 2880px !important;
  }

  .navbar-search-wrapper {
    max-width: 1140px;
    margin: 0 auto;
  }

  /* 12 cards per row (~235px wide each) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 8.3333% !important;
  }

  /* Info page 3K layout */
  .info-poster-col {
    flex: none !important;
    width: 16% !important;
    max-width: 440px !important;
  }
  .info-details-col {
    flex: 1 1 auto !important;
    max-width: calc(100% - 440px) !important;
  }
  .episode-card-col {
    flex: none !important;
    width: 8.3333% !important; /* 12 episodes per row */
  }
  .gallery-strip-col {
    flex: none !important;
    width: 14.2857% !important; /* 7 preview thumbnails */
  }

  /* Watch page 3K layout */
  .watch-main-container {
    max-width: 2900px;
    margin: 0 auto;
  }
  .watch-player-col {
    flex: none !important;
    width: 75% !important;
  }
  .watch-playlist-col {
    flex: none !important;
    width: 25% !important;
  }
  #videoContainer {
    max-height: calc(100vh - 210px);
    max-width: calc((100vh - 210px) * 16 / 9);
    margin: 0 auto;
  }
  #playlistItems {
    max-height: calc(100vh - 210px) !important;
  }

  .comments-drawer-content {
    width: min(540px, 26vw);
  }
  .modal-card {
    max-width: 760px;
  }
  body.has-fixed-top-nav,
  body {
    padding-top: 62px;
  }
}

/* --------------------------------------------------------------------------
   13. Breakpoint: 3440px (3.5K Ultrawide Displays / UWQHD 3440x1440)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 3440px) {
  html {
    font-size: 20px;
  }

  /* Expands container to 3300px */
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 3300px !important;
  }

  .navbar-search-wrapper {
    max-width: 1240px;
    margin: 0 auto;
  }

  /* 14 cards per row (~232px wide each) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 7.1428% !important;
  }

  /* Info page 3.5K layout */
  .info-poster-col {
    flex: none !important;
    width: 14% !important;
    max-width: 460px !important;
  }
  .info-details-col {
    flex: 1 1 auto !important;
    max-width: calc(100% - 460px) !important;
  }
  .episode-card-col {
    flex: none !important;
    width: 7.1428% !important; /* 14 episodes per row */
  }
  .gallery-strip-col {
    flex: none !important;
    width: 12.5% !important; /* 8 preview thumbnails */
  }

  /* Watch page 3.5K Ultrawide layout */
  .watch-main-container {
    max-width: 3350px;
    margin: 0 auto;
  }
  .watch-player-col {
    flex: none !important;
    width: 75% !important;
  }
  .watch-playlist-col {
    flex: none !important;
    width: 25% !important;
  }
  #videoContainer {
    max-height: calc(100vh - 220px);
    max-width: calc((100vh - 220px) * 16 / 9);
    margin: 0 auto;
  }
  #playlistItems {
    max-height: calc(100vh - 220px) !important;
  }

  .comments-drawer-content {
    width: min(560px, 24vw);
  }
  .modal-card {
    max-width: 800px;
  }
  body.has-fixed-top-nav,
  body {
    padding-top: 66px;
  }
}

/* --------------------------------------------------------------------------
   14. Breakpoint: 3840px (4K UHD Displays / 3840x2160 & Above)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 3840px) {
  html {
    font-size: 22px;
  }

  /* Expands container to 3700px for spectacular 4K utilization */
  .container:not(.is-fluid):not(.is-max-tablet):not(.is-max-desktop) {
    max-width: 3700px !important;
  }

  .navbar-search-wrapper {
    max-width: 1340px;
    margin: 0 auto;
  }

  /* 16 cards per row (~227px wide each) */
  #animeGrid > .column.anime-card-col,
  .anime-card-col {
    flex: none !important;
    width: 6.25% !important;
  }

  /* Info page 4K layout */
  .info-poster-col {
    flex: none !important;
    width: 13% !important;
    max-width: 480px !important;
  }
  .info-details-col {
    flex: 1 1 auto !important;
    max-width: calc(100% - 480px) !important;
  }
  .episode-card-col {
    flex: none !important;
    width: 6.25% !important; /* 16 episodes per row */
  }
  .gallery-strip-col {
    flex: none !important;
    width: 11.1111% !important; /* 9 preview thumbnails */
  }

  /* Watch page 4K layout */
  .watch-main-container {
    max-width: 3700px;
    margin: 0 auto;
  }
  .watch-player-col {
    flex: none !important;
    width: 75% !important;
  }
  .watch-playlist-col {
    flex: none !important;
    width: 25% !important;
  }
  #videoContainer {
    max-height: calc(100vh - 230px);
    max-width: calc((100vh - 230px) * 16 / 9);
    margin: 0 auto;
  }
  #playlistItems {
    max-height: calc(100vh - 230px) !important;
  }

  .comments-drawer-content {
    width: min(600px, 22vw);
  }
  .modal-card {
    max-width: 840px;
  }
  body.has-fixed-top-nav,
  body {
    padding-top: 72px;
  }
}