/* Yanai Calendar - Monthly Calendars Page CSS */

/* Page background with soft blue wavy feel (Correction 8) */
.theme-monthly-gradient {
  background-image: 
    radial-gradient(circle at 10% 30%, rgba(29, 112, 184, 0.08), transparent 45%),
    radial-gradient(circle at 90% 70%, rgba(124, 58, 237, 0.05), transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%) !important;
  border-bottom: 1px solid var(--color-border);
}

/* Enhancing monthly cards to have a cool-slate vibe */
.theme-monthly .sizes-grid .premium-card {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(29, 112, 184, 0.04);
}

.theme-monthly .sizes-grid .premium-card:hover {
  border-color: var(--color-royal-blue) !important;
  box-shadow: 0 12px 30px rgba(29, 112, 184, 0.15) !important;
}

/* Even white border around every monthly calendar image */
.theme-monthly .sizes-grid .card-img-wrapper img,
.theme-monthly .sizes-grid .card-img-wrapper .contain {
  border: 8px solid #ffffff;
  box-shadow: 0 0 0 1px #e2e8f0, 0 4px 10px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

/* ==========================================================================
   MONTHLY HERO PURE GRAPHIC BANNER SHOWCASE (STANDARDIZED SIZE)
   ========================================================================== */
.monthly-hero-banner {
  width: 100%;
  height: var(--banner-height, 420px);
  background: var(--bg-hero, #a12999);
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monthly-banner-wrapper {
  width: 100%;
  height: 100%;
  max-width: var(--max-width-wide, 1400px);
  margin: 0 auto;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monthly-banner-pure-img {
  width: 100%;
  height: 100%;
  max-height: var(--banner-height, 420px);
  display: block;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 991px) {
  .monthly-hero-banner {
    height: var(--banner-height-tablet, 340px);
  }
  .monthly-banner-pure-img {
    max-height: var(--banner-height-tablet, 340px);
  }
}

@media (max-width: 600px) {
  .monthly-hero-banner {
    height: var(--banner-height-mobile, 240px);
  }
  .monthly-banner-pure-img {
    max-height: var(--banner-height-mobile, 240px);
  }
}




/* ==========================================================================
   MONTHLY CATALOGUE GRID — one overall grid, every card built the same way
   Image frame, title, design no, spec box and button all sit at the same
   position in every card, so rows line up perfectly.
   ========================================================================== */
@media (min-width: 601px) {
  .theme-monthly .sizes-grid {
    grid-auto-rows: 1fr;          /* every row = same height */
  }
}

.theme-monthly .sizes-grid .premium-card {
  height: auto;
}

.theme-monthly .sizes-grid .card-content {
  flex: 1 1 auto;                 /* content fills the card, button stays at the bottom */
  align-items: stretch;
}

/* Fixed-size image frame: all calendars (15x20 / 17x27 / 20x30) are centred
   inside the same box, so nothing below the image shifts up or down. */
.theme-monthly .sizes-grid .card-img-wrapper {
  background: #eef2f7;
  padding: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 340px !important;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-monthly .sizes-grid .card-img-wrapper img,
.theme-monthly .sizes-grid .card-img-wrapper .contain {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #ffffff;
}

/* Title: always reserves two lines, so the design no. starts at the same height */
.theme-monthly .sizes-grid .premium-card h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  min-height: 2.6em;
  margin: 0;
}

/* Spec box: same left edge, same padding and text style on every card;
   it stretches to fill the card so all buttons end on one line */
.theme-monthly .sizes-grid .card-specs-box {
  margin: 0.85rem 0 1.25rem;
  flex: 1 1 auto;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 0;
  border: 1px solid #e2e8f0;
  text-align: left;
}

/* Bullets: wrapped lines hang under the text, not under the bullet */
.theme-monthly .sizes-grid .card-specs-box > div {
  padding-left: 0.9em;
  text-indent: -0.9em;
}

/* Narrower screens: cards get slimmer, so long titles / design numbers wrap
   to more lines. Reserve the same number of lines on every card so the
   next block still starts at the same height. */
@media (max-width: 1199px) {
  .theme-monthly .sizes-grid .premium-card h3 {
    min-height: 3.9em;
  }
  .theme-monthly .monthly-design-no {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: calc(2.6em + 0.8rem + 2px);
  }
}

@media (max-width: 991px) {
  .theme-monthly .sizes-grid .card-img-wrapper {
    height: 320px !important;
  }
}

@media (max-width: 600px) {
  .theme-monthly .sizes-grid .card-img-wrapper {
    height: 340px !important;
  }
  .theme-monthly .sizes-grid .premium-card h3 {
    min-height: 2.6em;
  }
  .theme-monthly .monthly-design-no {
    min-height: 0;
  }
}

/* Tinted (not pure white) background box + even white border around every
   monthly calendar image — the photos themselves have white paper
   backgrounds, so a pure-white wrapper made the image edges invisible. */

/* ==========================================================================
   LIGHTBOX OVERRIDE — MONTHLY CALENDARS ONLY
   No background box behind the image (same treatment as Daily Calendars) —
   only the image itself shows on the dark backdrop, no white/tinted box.
   All 14 pictures share the same crop, margin and height.
   ========================================================================== */
body.theme-monthly .lightbox-zoom-layer {
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
body.theme-monthly .lightbox-img {
  display: block;
  width: auto;
  height: min(74vh, 1260px);
  max-width: 88vw;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 768px) {
  body.theme-monthly .lightbox-zoom-layer {
    width: auto;
    height: auto;
    padding: 0;
  }
  body.theme-monthly .lightbox-img {
    height: min(66vh, 1260px);
    max-width: 92vw;
  }
}

/* Monthly Calendar catalogue Design No. — matches the Daily Calendar number treatment */
.theme-monthly .monthly-design-no {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.55rem 0 0;
  align-self: flex-start;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-primary);
  background: #f8fafc;
  border: 1px solid var(--color-border);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.theme-monthly .premium-card:hover .monthly-design-no {
  background: #e0f2fe;
  color: #0284c7;
}

@media (max-width: 600px) {
  .theme-monthly .monthly-design-no {
    font-size: 0.74rem;
    padding: 0.35rem 0.6rem;
  }
}