/* =========================================================
   page-desktop.css  —  DESKTOP ONLY (801px and up)
   Loads after page.css, so it overrides the mobile base.
========================================================= */

@media(min-width:801px){

  /* =========================
     SITE WRAPPER
  ========================= */

  .site-wrap{
    max-width:1100px;
  }


  /* =========================
     HEADER
  ========================= */

  header.site-header{
    min-height:125px;
  }

  .logo-holder{
    padding:20px 28px;
  }

  .logo-holder img{
    max-width:280px;
  }

  .site-title-wrap{
    padding:20px 30px;
  }

  .site-title{
    font-size:clamp(1.8rem, 3vw, 3rem);
  }


  /* =========================================================
     ONE COMBINED CARD
     Rows 1-2: Cover (left) | Title + Info, then Genre (right)
     Row 3:    Synopsis — full width, starts at the left edge
  ========================================================= */

  main{
    --pad:25px;
    --cover-w:200px;
    --col-gap:30px;

    display:grid;
    grid-template-columns:var(--pad) var(--cover-w) minmax(0,1fr) var(--pad);
    align-items:start;
  }

  /* background + bottom line behind rows 1-3 */
  main::before{
    content:"";
    grid-column:1 / -1;
    grid-row:1 / 4;
    align-self:stretch;
    background:rgba(255,255,255,.035);
    border-bottom:1px solid rgba(255,255,255,.10);
    z-index:0;
  }

  /* let cover + details join the main grid */
  .series-info-box{
    display:contents;
  }

  .series-cover,
  .series-details,
  .genre-section,
  .summary-section{
    position:relative;
    z-index:1;
  }

  .series-cover{
    grid-column:2;
    grid-row:1 / 3;
    width:100%;
    min-width:0;
    margin:var(--pad) 0 0;
  }

  .series-details{
    grid-column:3;
    grid-row:1;
    margin:var(--pad) 0 0 var(--col-gap);
  }

  .genre-section{
    grid-column:3;
    grid-row:2;
    width:auto;
    margin:16px 0 0 var(--col-gap);
    padding:16px 0 0;
    border-bottom:0;
    border-top:1px solid rgba(255,255,255,.10);
  }

  .summary-section{
    grid-column:2 / 4;
    grid-row:3;
    width:auto;
    margin:16px 0 var(--pad);
    padding:16px 0 0;
    background:none;
    border-bottom:0;
    border-top:1px solid rgba(255,255,255,.10);
  }

  .chapter-section{
    grid-column:1 / -1;
    grid-row:4;
  }


  /* =========================
     SERIES DETAILS
  ========================= */

  .series-details h1{
    font-size:36px;
  }

  .meta-item{
    padding:10px 14px;
    font-size:14px;
  }


  /* =========================
     GENRE
  ========================= */

  .section-title{
    font-size:20px;
  }

  .genre-card{
    padding:8px 15px;
    font-size:14px;
  }


  /* =========================
     SUMMARY
  ========================= */

  .summary-title{
    font-size:20px;
    margin-bottom:8px;
  }

  .summary-text{
    font-size:15px;
    line-height:1.6;
    max-width:1000px;
  }


  /* =========================
     CHAPTER
  ========================= */

  .chapter-section h2{
    font-size:24px;
    padding:18px 25px 14px;
  }

  .chapter-head{
    padding-right:25px;
  }

  .sort-toggle{
    height:38px;
    padding:0 14px;
    font-size:14px;
  }

  .chapter-controls{
    gap:10px;
    padding:0 12px 20px;
  }

  .chapter-search{
    height:44px;
    font-size:14px;
  }

  .chapter-select{
    flex:0 0 210px;
    width:210px;
    height:44px;
    font-size:14px;
  }

  .chapter-list{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    padding:12px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:68px !important;
    padding:8px 10px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:17px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:12px !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:10px !important;
  }


  /* =========================
     VOLUME LIST
  ========================= */

  .volume-list{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    padding:12px;
  }

  .volume-list li a,
  .volume-link{
    min-height:68px !important;
    padding:8px 10px !important;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:17px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:12px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:10px !important;
  }


  /* =========================
     FOOTER
  ========================= */

  .footer-links a{
    padding:22px 10px;
    font-size:1.3rem;
  }

  .copyright{
    padding:18px;
    font-size:.85rem;
  }
}


/* =========================================================
   EXTRA LARGE DESKTOP (1200px and up)
========================================================= */

@media(min-width:1200px){

  .site-wrap{
    max-width:1200px;
  }

  header.site-header{
    min-height:140px;
  }

  main{
    --pad:30px;
    --cover-w:220px;
    --col-gap:35px;
  }

  .series-details h1{
    font-size:40px;
  }

  .chapter-list{
    gap:10px;
    padding:14px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:72px !important;
  }

  .volume-list{
    gap:10px;
    padding:14px;
  }

  .volume-list li a,
  .volume-link{
    min-height:72px !important;
  }
}