/* ==========================================
   series.css - Zerui BLM-550W Series Page
========================================== */
:root {
  /* You can move your global variables here if needed, or keep in home.css */
  --white: #ffffff;
  --eerie-black: #212121;
  --oxford-blue-3: #283655;
  --international-orange-engineering: #c73e1d;
  --fw-600: 600;
  --box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
}

.series{
  background-color:var(--white);
}
.series-container{
  max-width:2000px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  --dynamic-nav-height: calc(var(--dynamic-nav-height, 0px) + 40px);
  padding-top: var(--dynamic-nav-height);
  padding-bottom:90px;
  padding-inline:12rem;
  align-items: center; 
}
.series-content{
}
.series-subtitle{
  font-size:2.5rem;
  color:var(--eerie-black);
  margin-bottom:2rem;
}
.series-subtitle em{
  color:var(--international-orange-engineering);
  font-style:normal;
}
.series-title{
  color:var(--eerie-black);
  font-size: 4rem;
  margin-bottom:5rem;
}
.series-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem 3rem;
  width:100%;
  max-width:800px;
  margin-top:4rem;
  list-style:none;
  margin-bottom:5rem;
}
.series-feature{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  font-size:1.6rem;
  line-height:1.2;
}
.series-picture{
  width: 80%;
  margin-left: auto;
  display: grid;
  place-items: center;  
  aspect-ratio: 1 / 1; 
  overflow: hidden;
}
.series-picture img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
}
.series-feature i{
  flex-shrink:0;
  font-size:3.5rem;
  color:rgb(16, 29, 71);
  margin-top:0.2rem;
}
.series-feature p{
  color:var(--eerie-black);
  font-size:2rem;
  line-height:1.6;
}
.series-feature strong{
  color:var(--eerie-black);
  font-weight:var(--fw-600);
  text-transform:uppercase;
}
.series-content .btn{
  margin-inline:auto;
}

/* *** items section*** */
.items{
  background-color:rgb(245, 245, 245);
}
.items-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:75px;                      
  align-items:stretch;
  padding-block:10rem;
  width:90%;
  margin-block:auto;
  margin-inline:auto; 
}
.item-card{
  background-color:rgb(243, 242, 242);
  width:100%;    
  max-width:580px; 
  border-radius: 30px;
  padding:5rem;
  box-shadow:var(--box-shadow);
  cursor: pointer;
}
.item-card h2{
  color:var(--oxford-blue-3);
  font-size:3rem;
  padding:1rem 0;
  text-align:center;
}
.item-card h3{
  color:var(--international-orange-engineering);
  font-size:2.5rem;
  padding:1.8rem 0;
  text-align:center;
}
.item-pic{
  width:100%;
  aspect-ratio:800 / 1067;
  overflow:hidden;
  border-radius:30px;
}
.item-pic img{
  width:100%;
  object-fit:cover;
  cursor:pointer;
  transition:var(--transition);
}
.item-pic:is(:hover,:focus-within) img {
  transform: scale(1.05);
  filter: saturate(1.15);
}

/* --------- Dialog Modal Styles (position below clicked card) --------- */
#modalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 999;
  opacity:0;
  transition: opacity 0.2s ease;
}
#modalBackdrop.show {
  display:block;
  opacity:1;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.8rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
}

#specModal {
  border: none;
  border-radius: 10px;
  padding: 2rem;
  position: absolute;
  width: fit-content;
  max-width: 92%;
  z-index: 1000;
  margin: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  visibility: visible;
  position: absolute;
  inset: auto;
}

#specModal[open] {
  opacity: 1;
  transform: translateY(0);
}

.spec-content {
  width: fit-content;
}

.spec-content h2 {
  margin-top:0;
}

.spec-table-container {
  overflow-x: auto;
  margin: 1.5rem 0;
  width: fit-content;
  max-width: 100%;
}
.spec-table {
  width: auto;
  table-layout: auto;
  border-collapse: collapse;
}
.spec-table th, .spec-table td {
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}
.spec-table th {
  white-space: nowrap;
  background-color: #f5f5f5;
}

.btn-pdf {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  background: #d92121;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

/* --------------responsive media queries -------------------- */
@media (max-width:1799px){
  .series-title{
    font-size: 3.5rem;
    margin-bottom:3rem;
  }
  .series-feature{
    gap:0.7rem;
    font-size:1.2rem;
    line-height:1.2;
  }
  .series-picture{
    width: 90%;
  }
}

@media (max-width:1610px){
  .series-container{
    gap:3rem;
  }
  .series-title{
    font-size: 3.1rem;
    margin-bottom:2rem;
  }
  .series-feature{
    line-height:1;
  }
  .series-picture{
    width: 100%;
  }
  .item-card h3{
    font-size:2.2rem;
  }
}

@media (max-width:1439px){
  .series-container{
    grid-template-columns:1fr 1fr;
    padding-bottom:60px;
  }
  .series-subtitle{
    font-size:2.5rem;
  }
  .series-title{
    font-size: 2.2rem;
  }
  .series-feature p{
    line-height:1.2;
  }
  .btn{
    font-size:1.9rem;
    padding:20px 28px;
  }
}

@media (max-width:1200px){
  .series-container{
    grid-template-columns:1fr;
    width:80%;
  }
  .series-content{
    order:2;
  }
  .series-picture{
    order:1;
  }
  .items-container{
    grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    justify-items:center;
  }
}

@media (max-width:992px){
  .series-container{
    padding-inline:6rem;
    width:85%;
  }
}

@media (max-width:768px){
  .series-container{
    padding-inline:4rem;
    width:90%;
  }
}

@media (max-width:576px){
  .series-container{
    padding-inline:2rem;
    width:95%;
  }
  .item-card{
    padding:3rem;
    max-width: 100%;
  }
}

@media (max-width:480px){
  .series-container{
    padding-inline:1rem;
  }
  .series-features{
    grid-template-columns:1fr;
    margin-top:2rem;
    margin-bottom:5rem;
  }
  .item-card h2{
    font-size:2.2rem;
  }
  .item-card h3{
    font-size:2rem;
  }
  .items-container{
    grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr));
    width: 95%;
    padding-block: 6rem;
  }
  .item-card{
    padding:3rem;
    max-width: unset;
  }
}