/* ================================================================
   E-Learning Catalogue
   Design language matched to the provided catalogue reference:
   black canvas, centered gold title, book-cover-first layout,
   minimal text, generous spacing.
   Mobile-first.
   ================================================================ */

:root{
  --catalogue-bg:#000;
  --catalogue-gold:#baa274;
  --catalogue-text:#fff;
  --catalogue-muted:#7c7c7c;
}

body.elearning-catalogue-page{
  background:var(--catalogue-bg);
  color:var(--catalogue-text);
}

/* Keep the shared topbar visually aligned with catalogue reference */
.elearning-catalogue-page .main-header{
  position:absolute;
  z-index:100;
  width:100%;
  background:transparent;
}

/* Main black stage */
.elearning-catalogue{
  background:#000;
  min-height:100vh;
}

.catalogue-head-space{
  height:118px;
}

.catalogue-main{
  background:#000;
  padding:24px 0 86px;
}

.catalogue-container{
  width:min(100% - 30px, 1320px);
  margin:0 auto;
}

/* Title — clean and centered like source */
.catalogue-title-wrap{
  position:relative;
  text-align:center;
  padding:38px 0 48px;
}

.catalogue-kicker{
  margin:0 0 8px;
  color:#626262;
  font-size:9px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.catalogue-title-wrap h1{
  margin:0;
  color:var(--catalogue-gold);
  font-size:clamp(28px, 8vw, 42px);
  line-height:1.2;
  font-weight:300;
  letter-spacing:.01em;
}

/* DFlip grid — cover-first, no card UI */
.smart-dflip-grid{
  display:grid !important;
  grid-template-columns:1fr;
  gap:32px 16px;
  width:100%;
  max-width:520px;
  margin:0 auto;
  align-items:start;
}

/*
  DFlip creates the visual thumbnail itself.
  We intentionally remove dashboard/card-like chrome.
*/
.smart-dflip-grid ._df_thumb.smart-book{
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  cursor:pointer;
  transition:transform .32s ease, opacity .32s ease;
  -webkit-tap-highlight-color:transparent;
}

.smart-dflip-grid ._df_thumb.smart-book:hover{
  transform:translateY(-4px);
}

/* DFlip thumbnail/image areas */
.smart-dflip-grid ._df_thumb .df-book-wrapper,
.smart-dflip-grid ._df_thumb .df-book-cover,
.smart-dflip-grid ._df_thumb .df-book-cover-wrapper,
.smart-dflip-grid ._df_thumb .df-book-cover-img{
  border-radius:0 !important;
}

/* Keep the catalogue title beneath each cover restrained */
.smart-dflip-grid .df-book-title,
.smart-dflip-grid ._df_thumb .df-book-title{
  position:static !important;
  display:block !important;
  width:100% !important;
  background:transparent !important;
  color:#fff !important;
  text-align:center !important;
  font-size:10px !important;
  font-weight:300 !important;
  line-height:1.5 !important;
  letter-spacing:.02em !important;
  padding:12px 3px 0 !important;
  margin:0 !important;
  opacity:1 !important;
}

/* Avoid labels/badges that make it look like cards */
.smart-dflip-grid .df-book-tag,
.smart-dflip-grid .df-book-open,
.smart-dflip-grid .df-book-info{
  display:none !important;
}

/* Footer should start after a clean black breathing area */
.elearning-catalogue-page .footer-content{
  margin-top:0;
}

/* ------------ Tablet ------------ */
@media (min-width:700px){
  .catalogue-head-space{
    height:132px;
  }

  .catalogue-main{
    padding-top:30px;
    padding-bottom:110px;
  }

  .catalogue-title-wrap{
    padding:48px 0 68px;
  }

  .catalogue-kicker{
    font-size:10px;
  }

  .smart-dflip-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:48px 28px;
    max-width:1040px;
  }

  .smart-dflip-grid .df-book-title,
  .smart-dflip-grid ._df_thumb .df-book-title{
    font-size:11px !important;
    padding-top:14px !important;
  }
}

/* ------------ Desktop ------------ */
@media (min-width:1024px){
  .catalogue-head-space{
    height:140px;
  }

  .catalogue-main{
    padding-top:42px;
    padding-bottom:130px;
  }

  .catalogue-container{
    width:min(100% - 72px, 1400px);
  }

  .catalogue-title-wrap{
    padding:58px 0 82px;
  }

  .catalogue-title-wrap h1{
    font-size:40px;
  }

  .smart-dflip-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:58px 34px;
    max-width:1420px;
  }

  .smart-dflip-grid ._df_thumb.smart-book:hover{
    transform:translateY(-8px);
  }

  .smart-dflip-grid .df-book-title,
  .smart-dflip-grid ._df_thumb .df-book-title{
    font-size:12px !important;
  }
}

/* ------------ Large desktop ------------ */
@media (min-width:1440px){
  .catalogue-container{
    width:min(100% - 104px, 1500px);
  }

  .smart-dflip-grid{
    max-width:1240px;
    gap:64px 40px;
  }
}


/* ================================================================
   A4 cover framing — no extra animation layer
   Preserve iot(4) hover behavior exactly.
   ================================================================ */

.smart-dflip-grid ._df_thumb .df-book-wrapper,
.smart-dflip-grid ._df_thumb .df-book-cover,
.smart-dflip-grid ._df_thumb .df-book-cover-wrapper{
  position:relative !important;
  width:100% !important;
  aspect-ratio:210 / 297 !important;
  overflow:hidden !important;
}

.smart-dflip-grid ._df_thumb .df-book-cover-img,
.smart-dflip-grid ._df_thumb .df-book-cover img,
.smart-dflip-grid ._df_thumb img.df-book-cover-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Some DearFlip builds render the thumbnail as a background image. */
.smart-dflip-grid ._df_thumb .df-book-cover,
.smart-dflip-grid ._df_thumb .df-book-cover-wrapper{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* iot(4) effect:
   Mobile: lift 4px
   Desktop: lift 8px
   No entrance animation from bottom, no scale/zoom on hover.
*/


/* ================================================================
   MOBILE A4 BOOK COVER FIX
   Keep the cover/book proportion identical to desktop.
   ================================================================ */

@media (max-width: 760px){

  .smart-dflip-grid{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }

  .smart-dflip-grid ._df_thumb.smart-book{
    width:min(86vw, 360px) !important;
    max-width:360px !important;
    aspect-ratio:210 / 297 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .smart-dflip-grid ._df_thumb .df-book-wrapper,
  .smart-dflip-grid ._df_thumb .df-book-cover,
  .smart-dflip-grid ._df_thumb .df-book-cover-wrapper{
    width:100% !important;
    height:auto !important;
    aspect-ratio:210 / 297 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .smart-dflip-grid ._df_thumb .df-book-cover-img,
  .smart-dflip-grid ._df_thumb .df-book-cover img,
  .smart-dflip-grid ._df_thumb img.df-book-cover-img,
  .smart-dflip-grid ._df_thumb img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* DearFlip may inject inline width/height on mobile.
     Force its visible cover back to the A4 frame. */
  .smart-dflip-grid ._df_thumb [style*="width"],
  .smart-dflip-grid ._df_thumb [style*="height"]{
    max-width:100% !important;
  }

  /* Keep the original Master hover behavior on touch devices. */
  .smart-dflip-grid ._df_thumb:hover{
    transform:translateY(-4px) !important;
  }
}

/* Very small phones */
@media (max-width: 390px){
  .smart-dflip-grid ._df_thumb.smart-book{
    width:min(88vw, 330px) !important;
  }
}