/*
 * Large desktop layout
 * Keeps the existing tablet/mobile design intact while giving 1920–2560px
 * screens a wider content grid and more proportional type and controls.
 */

@media (min-width: 1920px) {
  :root {
    --main-container: 100%;
    --container-gutters: 60px;
    --section-space: 120px;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: calc(100% - 120px);
    max-width: none;
    padding-right: calc(var(--container-gutters) / 2);
    padding-left: calc(var(--container-gutters) / 2);
  }

  /* Header */
  .header-top {
    height: 52px;
    line-height: 52px;
  }

  .header-links li,
  .header-social a {
    font-size: 16px;
  }

  .header-logo {
    width: clamp(320px, 15vw, 385px);
  }

  .header-logo img {
    width: auto;
    max-width: 100%;
    max-height: 96px;
  }

  .header-layout1.style2 .header-search {
    width: clamp(820px, 38vw, 980px);
  }

  .header-middle .header-search {
    margin-right: 48px;
  }

  .main-menu > ul > li,
  .menu-style2 > ul > li {
    margin-right: 34px;
    margin-left: 34px;
  }

  .main-menu > ul > li > a,
  .menu-style2 > ul > li > a {
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 20px;
  }

  /* Homepage hero */
  .hero-static-banner {
    height: clamp(880px, 42vw, 1080px) !important;
    min-height: 880px !important;
    max-height: 1080px !important;
  }

  .hero-slider-container {
    top: 42% !important;
  }

  .hero-text-slider {
    min-height: 580px !important;
  }

  .slide-subtitle {
    margin-bottom: 22px;
    font-size: 21px;
    letter-spacing: 2.4px;
  }

  .slide-title {
    max-width: 1250px;
    padding-left: 32px;
    margin-bottom: 30px;
    border-left-width: 7px;
    font-size: clamp(68px, 3.3vw, 84px) !important;
    line-height: 1.18;
  }

  .slide-desc {
    max-width: 1050px;
    margin-bottom: 40px;
    font-size: 21px;
    line-height: 1.75;
  }

  .slide-btn {
    padding: 18px 38px;
    font-size: 18px;
  }

  /* Product rows */
  .products-scroll {
    gap: clamp(32px, 1.55vw, 40px);
  }

  .products-scroll .col-xl-2 {
    flex: 0 0 clamp(280px, 14.2vw, 365px);
    max-width: clamp(280px, 14.2vw, 365px);
  }

  .products-scroll .product-style1 {
    height: clamp(565px, 26vw, 690px); /* extra room so the title (see shop-premium.css) never gets clipped by .product-content's overflow:hidden */
    padding: clamp(18px, 1vw, 25px);
  }

  .products-scroll .product-img {
    height: clamp(270px, 14vw, 360px);
  }

  .products-scroll .product-content {
    padding: clamp(15px, 0.9vw, 22px);
  }

  .products-scroll .product-author {
    height: auto;
    max-height: 90px;
    font-size: clamp(16px, 0.78vw, 20px);
    line-height: 1.5;
  }

  .products-scroll .product-title {
    font-size: 18px; /* fixed, not vw-scaled - was clamping up to 21px on very wide screens and getting clipped */
    line-height: 1.3;
    height: auto;
    max-height: 48px; /* exactly 2 lines at 18px/1.3 */
  }

  .products-scroll .product-rating,
  .products-scroll .price-list li {
    font-size: clamp(15px, 0.72vw, 18px);
  }

  .products-scroll::-webkit-scrollbar {
    height: 10px;
  }

  .trending-layout1 .sec-title,
  .trending-layout1 .sec-title.h2,
  .book-category-section .section-heading h2,
  .vgs-blog-section .blog-heading h2,
  .faq-section .section-title h2,
  .academic-books .section-header h2,
  .children-books-collections .section-header h2,
  .sec-title {
    font-size: clamp(52px, 2.5vw, 64px) !important;
  }

  .title-area2 {
    margin-bottom: clamp(54px, 3vw, 76px);
  }

  .title-area2 .vs-btn {
    min-width: 180px;
    padding: 19px 34px;
    font-size: 17px;
  }
}

@media (min-width: 2300px) {
  :root {
    --container-gutters: 72px;
  }

  .header-layout1.style2 .header-search {
    width: 1080px;
  }
}

/*
 * About page at 2560px only.
 * The upper and lower bounds deliberately keep these composition changes
 * away from ordinary desktop, laptop, tablet and mobile breakpoints.
 */
@media (min-width: 2400px) and (max-width: 2700px) {
  /* Keep the 2560px hero copy in the visual upper third. */
  .home-page .hero-slider-container {
    top: 33% !important;
  }

  .about-page .about-layout1 > .container,
  .about-page .journey-layout > .container,
  .about-page .mission-vision-layout > .container,
  .about-page .strengths-layout > .container {
    width: calc(100% - 280px);
    max-width: 2100px;
  }

  .about-page .about-layout1 > .container {
    padding-bottom: 70px;
  }

  .about-page .about-layout1 .row {
    --bs-gutter-x: 72px;
    padding: 64px;
    border: 1px solid #edf1f5;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(30, 58, 95, 0.08);
  }

  .about-page .about-layout1 .row > .col-lg-4 {
    flex: 0 0 38%;
    width: 38%;
  }

  .about-page .about-layout1 .row > .col-lg-8 {
    flex: 0 0 62%;
    width: 62%;
  }

  .about-page .about-layout1 .about-img {
    display: flex;
    justify-content: center;
  }

  .about-page .about-layout1 .about-img img {
    width: 100%;
    max-width: 600px;
    max-height: 720px;
    margin-top: 0;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  }

  .about-page .about-layout1 .title-area {
    margin-bottom: 30px;
  }

  .about-page .about-layout1 .sec-title {
    font-size: 58px !important;
    line-height: 1.15 !important;
  }

  .about-page .about-layout1 .about-text {
    max-width: 1040px;
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.8;
  }

  .about-page .about-layout1 .list-style1 {
    margin-top: 32px;
  }

  .about-page .about-layout1 .list-style1 .list-unstyled {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 18px;
  }

  .about-page .about-layout1 .list-style1 .list-unstyled li {
    min-width: 0;
    padding-right: 0;
    font-size: 17px;
    line-height: 1.45;
  }

  .about-page .journey-layout {
    padding-top: 70px;
    padding-bottom: 55px;
  }

  .about-page .journey-layout > .container {
    padding: 64px 72px;
    border-radius: 28px;
    background: linear-gradient(135deg, #f7faff 0%, #f8f9fa 100%);
  }

  .about-page .journey-layout .sec-title {
    margin-bottom: 28px !important;
    font-size: 54px !important;
  }

  .about-page .journey-layout .about-text {
    max-width: 1780px;
    font-size: 18px;
    line-height: 1.8;
  }

  .about-page .mission-vision-layout {
    padding-bottom: 45px;
  }

  .about-page .mission-vision-layout .row {
    --bs-gutter-x: 36px;
  }

  .about-page .mission-vision-layout .mv-box {
    padding: 48px 52px;
    border-radius: 22px;
  }

  .about-page .mission-vision-layout .mv-title {
    margin-bottom: 18px;
    font-size: 28px;
  }

  .about-page .mission-vision-layout .mv-text {
    font-size: 17px;
    line-height: 1.8;
  }

  .about-page .strengths-layout {
    padding: 55px 0 110px;
  }

  .about-page .strengths-layout > .container {
    padding: 62px 80px;
    border: 1px solid #e5edf7;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(30, 58, 95, 0.07);
  }

  .about-page .strengths-title {
    margin-bottom: 24px;
    font-size: 46px;
  }

  .about-page .strengths-text {
    max-width: 1350px;
    font-size: 19px;
    line-height: 1.8;
  }

  /* Homepage FAQ: use the available 2560px canvas without long line lengths. */
  .home-page .faq-section {
    padding: 100px 0 120px;
    background:
      radial-gradient(circle at 12% 8%, rgba(25, 118, 210, 0.08), transparent 28%),
      #f6f8fb;
  }

  .home-page .faq-section > .container {
    width: calc(100% - 280px);
    max-width: 2100px;
  }

  .home-page .faq-section .section-title {
    max-width: 1200px;
    margin: 0 auto 58px !important;
  }

  .home-page .faq-section .section-title h2 {
    margin-bottom: 18px;
    font-size: 58px !important;
    line-height: 1.15 !important;
  }

  .home-page .faq-section .section-title p {
    margin: 0;
    font-size: 22px !important;
    line-height: 1.65;
  }

  .home-page .faq-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
  }

  .home-page .faq-item {
    margin-bottom: 0;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(24, 49, 83, 0.08);
  }

  .home-page .faq-item.active {
    grid-column: 1 / -1;
    border-color: rgba(25, 118, 210, 0.25);
    box-shadow: 0 16px 40px rgba(25, 118, 210, 0.12);
  }

  .home-page .faq-question {
    min-height: 82px;
    gap: 28px;
    padding: 24px 30px;
    font-size: 20px;
    line-height: 1.4;
  }

  .home-page .faq-question span {
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1;
  }

  .home-page .faq-answer p {
    max-width: 1500px;
    padding: 0 30px 28px;
    font-size: 18px;
    line-height: 1.75;
  }

  .home-page .faq-item.active .faq-answer {
    max-height: 420px;
  }
}