/* import another css file that is in the SAME folder */
@import "./header.css";
@import "./hero.css";
@import "./about_us.css";
@import "./testimonials.css";
@import "./meet_out_teacher.css";
@import "./contact.css";
@import "./footer.css";
@import "./event.css";
@import "./social-share.blade.css";
@import "./pop_up.css";
@import "./book/index.css";


/* -------------------------------------------------------------------- */
/* ========= Books / PDF Library ========= */
.books-section {
  background: #fffaf1;                 /* soft warm background */
  padding: 1rem 0.75rem;               /* smaller vertical padding */
  border-top: 3px solid var(--accent);
}

.books-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;                           /* reduced gap */
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

.books-copy h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: .25rem 0 .6rem;              /* smaller bottom margin */
  color: var(--primary);
  font-weight: 900;
}

.books-sub {
  color: #374151;
  max-width: 55ch;
  margin: 0 0 .75rem;                  /* less margin below */
}

.books-cta {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .75rem 0;   
  width: 20rem;
}

.books-points {
  margin: .25rem 0 .75rem;             /* reduced */
  padding-left: 1rem;
  color: #374151;
}
.books-points li { margin: .25rem 0; list-style: "✔  "; }

.books-badge {
  position: absolute;
  left: 8%;
  top: 45%;
  transform: translateY(-50%);
  background: #1db954;
  color: #fff;
  font-weight: 900;
  padding: .6rem 1rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  font-size: 0.9rem;
}

.books-ribbon {
  position: absolute;
  left: 22%;
  top: 60%;
  background: #1f4aff;
  color: #fff;
  font-weight: 800;
  padding: .55rem 1rem;
  border-radius: .6rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  font-size: 0.85rem;
}

/* payment icons (optional) */
.books-pay {
  display: flex;
  gap: .6rem;
  margin-top: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.books-pay img { height: 20px; width: auto; filter: grayscale(10%); }

.books-visual {
  position: relative;
  display: flex;
  justify-content: center;  /* keep image centered */
}

.books-link {
  display: inline-block;
  position: relative;
  text-decoration: none; /* remove underline */
  color: inherit;
  perspective: 1000px;   /* for 3D tilt */
}

.books-img {
  width: min(100%, 380px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;

  /* animation prep */
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), 
              box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform, box-shadow;
}

/* Hover tilt */
.books-link:hover .books-img,
.books-link:focus .books-img {
  transform: rotateX(6deg) rotateY(-6deg) scale(1.02);
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

/* Press feedback */
.books-link:active .books-img {
  transform: rotateX(0) rotateY(0) scale(.98);
}

/* Click "pop" animation */
.books-img.book-pop { animation: book-pop .45s cubic-bezier(.22,.61,.36,1); }
@keyframes book-pop {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-6px) scale(1.03); }
  60%  { transform: translateY(2px)  scale(.995); }
  100% { transform: translateY(0)   scale(1); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .books-img,
  .books-link:hover .books-img,
  .books-link:focus .books-img,
  .books-link:active .books-img {
    transition: none;
    transform: none;
  }
  .books-img.book-pop { animation: none; }
}

/* responsive tweaks */
@media (max-width: 600px) {
  .books-inner { grid-template-columns: 1fr; }
  .books-visual { order: -1; display: grid; place-items: center; }
  .books-img { 
    width: 100%;        /* full screen width */
    max-height: 480px;  /* ✅ limit vertical size */
    object-fit: cover;  /* crop instead of stretching */
    max-width: none;    /* remove the 300px limit */
    height: auto;
  }
  .books-badge { font-size: 0.75rem; padding: .4rem .75rem; top: 40%; }
  .books-ribbon { font-size: 0.7rem; padding: .4rem .75rem; top: 55%; }
}

/* When JS tilt is active, don't apply the static hover transform */
.js-tilt-enabled .books-link:hover .books-img,
.js-tilt-enabled .books-link:focus .books-img { transform: none; box-shadow: none; }