.seasonal-calendar-page { background: var(--cream); }
.calendar-intro { padding: 38px 0; color: white; background: var(--green); }
.calendar-intro-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(44px, 7vw, 94px); align-items: center; }
.calendar-intro .eyebrow { color: #f2c6a8; }
.calendar-intro h1 { max-width: 760px; margin-bottom: 20px; font-size: clamp(3rem, 5.15vw, 5.25rem); }
.calendar-intro p:not(.eyebrow) { max-width: 650px; margin: 0; color: rgba(255,255,255,.75); font-size: 1.03rem; }
.calendar-intro picture { height: 270px; overflow: hidden; background: var(--green-deep); }
.calendar-intro img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.calendar-workspace { padding-block: 58px 96px; }
.calendar-heading { display: grid; grid-template-columns: .28fr .72fr; gap: 34px; align-items: end; margin-bottom: 30px; }
.calendar-heading .eyebrow { margin-bottom: 8px; }
.calendar-heading h2 { font-size: clamp(2.2rem, 3.8vw, 3.7rem); }
.month-selector { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.month-select { min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: white; text-align: left; cursor: pointer; }
.month-select span { color: var(--terracotta); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.month-select strong { font: 700 .9rem/1.2 Manrope, Arial, sans-serif; }
.month-select:hover { background: var(--sand); }
.month-select[aria-pressed="true"] { color: white; background: var(--green); }
.month-select[aria-pressed="true"] span { color: #f2c6a8; }
.month-select.is-current::after { content: attr(data-current-label); margin-top: 5px; color: #f2c6a8; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.month-panels { margin-top: 26px; }
.month-panel { border: 1px solid var(--line); background: white; }
.month-panel[hidden] { display: none; }
.month-panel > header { display: grid; grid-template-columns: 1fr .58fr; gap: 34px; align-items: end; padding: clamp(30px, 5vw, 58px); color: white; background: var(--green-deep); }
.month-panel > header .eyebrow { color: #f2c6a8; }
.month-panel > header h2 { font-size: clamp(3rem, 5.6vw, 5.8rem); }
.month-condition { margin: 0; padding: 20px 0 4px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.78); }
.month-condition span { display: block; margin-bottom: 8px; color: #f2c6a8; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.month-focus { display: grid; grid-template-columns: .48fr .52fr; gap: 54px; padding: clamp(30px, 5vw, 58px); border-bottom: 1px solid var(--line); }
.month-focus h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.1; }
.month-focus p { margin: 0; color: var(--muted); font-size: 1rem; }
.month-details { display: grid; grid-template-columns: 1fr .72fr .82fr; }
.month-details > * { min-width: 0; padding: 30px; border-right: 1px solid var(--line); }
.month-details > *:last-child { border-right: 0; }
.month-details h3, .month-details aside > span { display: block; margin: 0 0 16px; color: var(--terracotta); font: 800 .75rem/1.3 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.month-details ol { margin: 0; padding-left: 22px; }
.month-details li, .month-details p { color: var(--muted); font-size: .88rem; line-height: 1.62; }
.month-details li + li { margin-top: 9px; }
.month-avoid { background: #fbf3ed; }
.month-avoid p { margin: 0; }
.month-details aside { color: white; background: var(--green); }
.month-details aside > span { color: #f2c6a8; }
.month-details blockquote { margin: 0; font: 700 1.08rem/1.5 Manrope, Arial, sans-serif; }
.month-panel > footer { min-height: 90px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 20px 30px; border-top: 1px solid var(--line); }
.month-share { min-height: 48px; padding: 10px 17px; border: 1px solid var(--line); color: var(--green); background: transparent; font-weight: 800; cursor: pointer; }
.month-share:hover { border-color: var(--terracotta); color: var(--terracotta); }
.month-panel > footer small { color: var(--terracotta); font-size: .76rem; font-weight: 700; }
.calendar-sources { padding-bottom: 86px; }
.calendar-sources h2 { margin-bottom: 28px; font-size: clamp(2rem, 3vw, 3rem); }
.calendar-sources ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.calendar-sources li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.calendar-sources li:nth-child(odd) { padding-right: 24px; }
.calendar-sources a { color: var(--terracotta); font-size: .86rem; font-weight: 800; }
.calendar-sources p { max-width: 820px; margin: 0; color: var(--muted); font-size: .86rem; }

@media (max-width: 980px) {
  .calendar-intro-layout, .month-focus { grid-template-columns: 1fr; }
  .calendar-intro picture { height: 280px; }
  .month-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .month-details { grid-template-columns: 1fr 1fr; }
  .month-details aside { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .calendar-intro { padding: 34px 0; }
  .calendar-intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .calendar-intro h1 { font-size: clamp(2.45rem, 10.8vw, 3.55rem); }
  html[lang="ru"] .calendar-intro h1 { font-size: clamp(2.05rem, 9vw, 2.85rem); }
  .calendar-intro picture { height: 170px; }
  .calendar-workspace { padding-block: 46px 72px; }
  .calendar-heading { grid-template-columns: 1fr; gap: 6px; }
  .month-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .month-select { min-height: 80px; padding: 12px; }
  .month-select strong { font-size: .78rem; }
  .month-panel > header, .month-focus, .month-details > *, .month-panel > footer { padding: 24px 20px; }
  .month-panel > header, .month-details { grid-template-columns: 1fr; }
  .month-panel > header { gap: 20px; }
  .month-focus { gap: 22px; }
  .month-details > * { border-right: 0; border-bottom: 1px solid var(--line); }
  .month-details aside { grid-column: auto; }
  .month-panel > footer { align-items: stretch; flex-direction: column; }
  .month-panel > footer .button, .month-share { width: 100%; }
  .calendar-sources ul { grid-template-columns: 1fr; }
  .calendar-sources li:nth-child(odd) { padding-right: 0; }
}