/* ================= BOOKS SECTION ================= */

.books-section {
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #fff;
  text-align: center;
}

.books-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #2b2b7c;
  margin-bottom: 10px;
}

.books-subtitle {
  font-size: clamp(15px, 2vw, 18px);
  margin-bottom: clamp(30px, 5vw, 60px);
  color: #000;
}

/* Grid adapts automatically */
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ FIXED: always 2 */
  gap: clamp(20px, 4vw, 40px);
  justify-items: center;
  max-width: 900px;     /* keeps layout centered & clean */
  margin: 0 auto;
}


.book-card {
  display: flex;
  justify-content: center;
}

.book-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  transition: all 0.4s ease;
}

.book-image:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ================= DEVICE SECTION ================= */

.fistula-device-section {
  padding: clamp(50px, 6vw, 90px) 20px;
  background: #f8f9fb;
  text-align: center;
}

.device-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: clamp(30px, 5vw, 50px);
  color: #2b2b7c;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(25px, 5vw, 50px);
  align-items: center;
}

.device-card {
  display: flex;
  justify-content: center;
}

.device-image {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  transition: all 0.4s ease;
}

.device-image:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

/* ================= TOUCH DEVICES ================= */
@media (hover: none) {
  .book-image:hover,
  .device-image:hover {
    transform: none;
    box-shadow: none;
  }
}
/* BOOKS */
.book-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;   /* Book shape */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f6fb;
}

.book-image {
  object-fit: contain;
  /* padding: 12px; */
  transition: 0.4s ease;
}

.book-frame:hover .book-image {
  transform: scale(1.05);
}

/* DEVICES */
.device-frame {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 4;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f6fb;
}

.device-image {
  object-fit: contain;
  padding: 16px;
  transition: 0.4s ease;
}

.device-frame:hover .device-image {
  transform: scale(1.05);
}