/* Sergio Bravo — Calendar layout contract v0.1.29
   Loaded AFTER sergio-bravo.css.
   The annual calendar follows the site's 80/20 architecture on desktop:
   the calendar lives in the left visual field and the right navigation rail stays free.
*/

.sb-calendar-page,
.sb-calendar-page > .wp-block-shortcode,
.sb-calendar-page .sb-calendar-system {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ---------- Global calendar canvas ---------- */
.sb-calendar-page .sb-calendar-screen {
  --sb-calendar-rail: 20vw;
  background: var(--sb-black) !important;
  box-sizing: border-box !important;
  color: var(--sb-white) !important;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  width: 100% !important;
}

body:has(.sb-calendar-page) .sb-site-title a,
body:has(.sb-calendar-page) .sb-primary-nav .wp-block-navigation__responsive-container-open {
  color: var(--sb-white) !important;
}
body:has(.sb-calendar-page) .sb-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--sb-black) !important;
}

/* ---------- Year lockup ---------- */
.sb-calendar-page .sb-calendar-year-nav {
  align-self: start !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 4px 0 0 !important;
  width: 100% !important;
}
.sb-calendar-page .sb-calendar-year-nav > a {
  display: none !important;
}
.sb-calendar-page .sb-calendar-year-lockup {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.sb-calendar-page .sb-calendar-year-lockup p {
  color: rgba(255,255,255,.58) !important;
  font-family: var(--sb-sans) !important;
  font-size: clamp(8px, .52vw, 10px) !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}
.sb-calendar-page .sb-calendar-year-lockup h1 {
  color: var(--sb-white) !important;
  font-family: var(--sb-sans) !important;
  font-size: clamp(4rem, 5.2vw, 5.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
  line-height: .84 !important;
  margin: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* ---------- Month + day geometry ---------- */
.sb-calendar-page .sb-calendar-months {
  align-content: stretch !important;
  align-items: stretch !important;
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sb-calendar-page .sb-calendar-month {
  align-content: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.sb-calendar-page .sb-calendar-month h2 {
  border: 0 !important;
  color: rgba(255,255,255,.94) !important;
  font-family: var(--sb-sans) !important;
  font-size: clamp(.66rem, .68vw, .82rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 0 clamp(6px, .75vh, 10px) !important;
  min-height: 1em !important;
  padding: 0 !important;
}
.sb-calendar-page .sb-calendar-weekdays {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* WordPress must never be allowed to turn line breaks into grid items. */
.sb-calendar-page .sb-calendar-days > br {
  display: none !important;
}

.sb-calendar-page .sb-calendar-days {
  align-content: stretch !important;
  display: grid !important;
  gap: 0 !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}
.sb-calendar-page .sb-calendar-days > span,
.sb-calendar-page .sb-calendar-days > a {
  align-items: center !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  box-sizing: border-box !important;
  color: rgba(255,255,255,.82) !important;
  display: flex !important;
  font-family: var(--sb-sans) !important;
  font-size: clamp(.58rem, .58vw, .72rem) !important;
  font-weight: 400 !important;
  height: auto !important;
  justify-content: center !important;
  justify-self: stretch !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  position: relative !important;
  text-decoration: none !important;
  width: auto !important;
}
.sb-calendar-page .sb-calendar-days > .is-empty {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Programmed event days ---------- */
.sb-calendar-page .sb-calendar-days > .has-event {
  color: var(--sb-black) !important;
  font-weight: 700 !important;
  isolation: isolate !important;
  z-index: 1 !important;
}
.sb-calendar-page .sb-calendar-days > .has-event::before {
  background: var(--sb-white) !important;
  border: 2px solid var(--sb-white) !important;
  border-radius: 52% 48% 46% 54% !important;
  content: "" !important;
  height: 2.15em !important;
  left: 50% !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-7deg) !important;
  transition: transform .16s ease !important;
  width: 2.35em !important;
  z-index: -1 !important;
}
.sb-calendar-page .sb-calendar-days > .has-event::after {
  display: none !important;
}
.sb-calendar-page .sb-calendar-days > .has-event:hover::before,
.sb-calendar-page .sb-calendar-days > .has-event:focus-visible::before {
  transform: translate(-50%, -50%) rotate(4deg) scale(1.1) !important;
}

/* ---------- Tooltip ---------- */
.sb-calendar-tooltip {
  background: var(--sb-white) !important;
  box-sizing: border-box !important;
  color: var(--sb-black) !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  padding: 13px 15px 14px !important;
  position: fixed !important;
  width: max-content !important;
  z-index: 200000 !important;
}

/* =========================================================
   DESKTOP / FULL WIDE
   4 x 3 annual matrix. The right rail remains deliberately empty,
   matching the same navigation field used by the 80/20 hero system.
   ========================================================= */
@media (min-width: 1600px) {
  .sb-calendar-page .sb-calendar-screen {
    --sb-calendar-rail: 20vw;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .sb-calendar-page .sb-calendar-screen {
    --sb-calendar-rail: 22vw;
  }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .sb-calendar-page .sb-calendar-screen {
    --sb-calendar-rail: 24vw;
  }
}

@media (min-width: 901px) {
  .sb-calendar-page .sb-calendar-screen {
    align-items: stretch !important;
    display: grid !important;
    gap: clamp(24px, 2.5vw, 48px) !important;
    grid-template-columns: clamp(145px, 12.5vw, 215px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: clamp(82px, 8.5vh, 104px) var(--sb-calendar-rail) clamp(22px, 2.5vh, 30px) var(--sb-gutter) !important;
  }
  .sb-calendar-page .sb-calendar-months {
    column-gap: clamp(18px, 1.7vw, 34px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    row-gap: clamp(12px, 1.55vh, 20px) !important;
  }
  .sb-calendar-page .sb-calendar-month h2 {
    margin-bottom: clamp(5px, .55vh, 8px) !important;
  }
}

/* Extra-wide screens: use the extra resolution for breathing room inside each month,
   not for creating an additional empty zone between the two month rows. */
@media (min-width: 1800px) {
  .sb-calendar-page .sb-calendar-screen {
    grid-template-columns: clamp(165px, 12vw, 230px) minmax(0, 1fr) !important;
    gap: clamp(30px, 2.4vw, 50px) !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup h1 {
    font-size: clamp(4.5rem, 5vw, 5.8rem) !important;
  }
  .sb-calendar-page .sb-calendar-days > span,
  .sb-calendar-page .sb-calendar-days > a {
    font-size: clamp(.62rem, .54vw, .76rem) !important;
  }
}

/* =========================================================
   PORTRAIT TABLET
   No permanent right rail: preserve usable month width with a 3 x 4 matrix.
   ========================================================= */
@media (min-width: 760px) and (max-width: 900px) {
  .sb-calendar-page .sb-calendar-screen {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 72px clamp(22px, 3vw, 34px) 14px !important;
  }
  .sb-calendar-page .sb-calendar-year-nav {
    padding: 0 !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup {
    align-items: baseline !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup p {
    order: 2 !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup h1 {
    font-size: clamp(3.2rem, 7vw, 4.6rem) !important;
    line-height: .8 !important;
  }
  .sb-calendar-page .sb-calendar-months {
    column-gap: clamp(18px, 2.7vw, 30px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    row-gap: clamp(8px, 1.15vh, 14px) !important;
  }
  .sb-calendar-page .sb-calendar-month h2 {
    font-size: clamp(.62rem, 1vw, .76rem) !important;
    margin-bottom: 4px !important;
  }
  .sb-calendar-page .sb-calendar-days > span,
  .sb-calendar-page .sb-calendar-days > a {
    font-size: clamp(.54rem, .82vw, .66rem) !important;
  }
}

/* =========================================================
   MOBILE — agenda first, matching the previously approved Wenders logic.
   ========================================================= */
@media (max-width: 759px) {
  .sb-calendar-page .sb-calendar-screen {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: 74px 0 0 !important;
  }
  .sb-calendar-page .sb-calendar-year-nav {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 20px !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup {
    align-items: baseline !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup p {
    font-size: 8px !important;
    order: 2 !important;
  }
  .sb-calendar-page .sb-calendar-year-lockup h1 {
    font-size: clamp(3.8rem, 20vw, 5.4rem) !important;
    line-height: .84 !important;
  }
  .sb-calendar-page .sb-calendar-months {
    display: none !important;
  }

  .sb-calendar-page .sb-calendar-mobile-agenda {
    border-top: 1px solid rgba(255,255,255,.18) !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event {
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    box-sizing: border-box !important;
    color: var(--sb-white) !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px 20px 20px !important;
    width: 100% !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__meta,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__body {
    grid-column: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__arrow {
    display: none !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__date,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__time,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__type,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__place,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__excerpt {
    color: rgba(255,255,255,.68) !important;
    max-width: none !important;
    width: 100% !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__title,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__title a {
    color: var(--sb-white) !important;
    font-size: clamp(1.55rem, 8vw, 2.35rem) !important;
    line-height: 1.02 !important;
    max-width: none !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-event__excerpt {
    display: none !important;
  }
  .sb-calendar-page .sb-calendar-mobile-agenda__more,
  .sb-calendar-page .sb-calendar-mobile-agenda .sb-calendar-empty {
    box-sizing: border-box !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    margin: 0 !important;
    padding: 16px 20px 20px !important;
    text-transform: uppercase !important;
    width: 100% !important;
  }
  .sb-calendar-page .sb-calendar-events__group--upcoming {
    display: none !important;
  }
  .sb-calendar-page .sb-calendar-events__group--previous {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
  }
  .sb-calendar-tooltip {
    display: none !important;
  }
}

/* Short desktop/tablet viewports: tighten internal rhythm without changing the 4 x 3 architecture. */
@media (min-width: 901px) and (max-height: 700px) {
  .sb-calendar-page .sb-calendar-screen {
    padding-top: 66px !important;
    padding-bottom: 10px !important;
  }
  .sb-calendar-page .sb-calendar-months {
    row-gap: 7px !important;
  }
  .sb-calendar-page .sb-calendar-month h2 {
    margin-bottom: 2px !important;
  }
  .sb-calendar-page .sb-calendar-days > span,
  .sb-calendar-page .sb-calendar-days > a {
    font-size: .52rem !important;
  }
}