/* ===============================
   SHARED LAYOUT (SCREEN + PRINT)
   =============================== */

.page {
  display: block;
  position: relative;
  font-family: var(--calendar-font-base);
}

.page-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.functional-zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ================= Month grids ================= */

.months-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: var(--month-row-height);
  gap: 3mm;
}

.months-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: var(--month-row-height);
  gap: 3mm;
}

.months-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--month-row-height);
}

/* ================= Photo zone ================= */

.decorative-zone {
  flex: 0 0 auto;
  height: calc(var(--month-row-height) * 3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.decorative-zone[data-style="dotted"] {
  border: 2px dashed var(--photo-border-color);
}

.decorative-zone[data-style="solid"] {
  border: 2px solid var(--photo-border-color);
}

.decorative-zone[data-style="decorative"] {
  border: 2px solid var(--photo-border-color);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.04);
}