/* Monthly calendar: shared by the in-app pop-up and the wall kiosk page. */
.cal { --cal-bg: #fff; --cal-ink: #1d1d1d; --cal-muted: #8a8a8a; --cal-cell: #f6f3ee; --cal-weekend: #efeae2;
       --cal-accent: #c0392b; --cal-gold: #c9a227; color: var(--cal-ink); }

/* ---------- Desktop / kiosk grid: full width, no borders, Sunday first ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows), minmax(0, 1fr));
            gap: 4px; width: 100%; height: 100%; }
.cal-dow { text-align: center; font-weight: 700; font-size: clamp(11px, 1.2vw, 18px); padding: 6px 0; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.cal-dow.sun { color: var(--cal-accent); }
.cal-cell { position: relative; background: var(--cal-cell); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
.cal-cell.weekend { background: var(--cal-weekend); }
.cal-cell.blank { background: transparent; }
.cal-num { font-size: clamp(16px, 2.6vw, 44px); font-weight: 300; color: #444; }
.cal-cell.today { box-shadow: inset 0 0 0 4px var(--cal-accent); background: #fff3ef; }
.cal-cell.today .cal-num { font-weight: 800; color: var(--cal-accent); }
.cal-today-tag { position: absolute; top: 4px; left: 6px; font-size: clamp(9px, .8vw, 13px); font-weight: 800; color: var(--cal-accent); text-transform: uppercase; z-index: 2; }

/* Events in a cell: photos sized to share the space */
.cal-items { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; width: 100%; height: 100%; padding: 4px; align-items: center; justify-items: center; }
.cal-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; height: 100%; }
.cal-pics { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; flex: 1; min-height: 0; container-type: size; }
/* Round photos sized to the space available (stay circles however many share the box) */
.cal-av { width: min(100cqw, 100cqh); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #ddd; flex: none;
          box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.25); }
.cal-pics.pair .cal-av { width: min(42cqw, 100cqh); }
.calm-ev .cal-av { flex: none; }
/* Blank avatar: grey circle with a person outline */
.cal-blank { display: block; background: #d9d4cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='17' fill='%23a39b8f'/%3E%3Cpath d='M18 88c3-18 17-28 32-28s29 10 32 28z' fill='%23a39b8f'/%3E%3C/svg%3E") center / cover no-repeat; }
.cal-link { font-size: clamp(10px, 1.1vw, 20px); flex: none; line-height: 1; }
.cal-cap { font-size: clamp(9px, .95vw, 16px); font-weight: 700; text-align: center; line-height: 1.15; padding-top: 2px; max-width: 100%;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }

/* Celebration: today is a birthday or anniversary */
.cal-cell.celebrate { box-shadow: inset 0 0 0 4px var(--cal-gold); background: #fff8e1; }
.cal-cell.celebrate::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(circle, #e74c3c 1.6px, transparent 2px), radial-gradient(circle, #3498db 1.6px, transparent 2px),
    radial-gradient(circle, #f1c40f 1.8px, transparent 2.2px), radial-gradient(circle, #2ecc71 1.6px, transparent 2px),
    radial-gradient(circle, #9b59b6 1.6px, transparent 2px);
  background-size: 38px 34px, 46px 40px, 30px 44px, 52px 36px, 42px 48px;
  background-position: 3px 5px, 17px 21px, 9px 31px, 29px 12px, 23px 2px;
  -webkit-mask: linear-gradient(#000 0 18%, transparent 30% 70%, #000 82%); mask: linear-gradient(#000 0 18%, transparent 30% 70%, #000 82%); }
.cal-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 3; text-align: center; font-weight: 800; font-size: clamp(9px, .9vw, 15px);
              color: #fff; background: linear-gradient(90deg, #c0392b, #e67e22, #c0392b); padding: 2px 0; letter-spacing: .03em; }
.cal-cell.celebrate .cal-items { padding-top: clamp(14px, 1.4vw, 22px); }

/* ---------- Mobile: phone-calendar style (month grid + day list) ---------- */
.calm { display: flex; flex-direction: column; height: 100%; }
.calm-dow, .calm-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calm-dow div { text-align: center; font-size: 12px; font-weight: 600; color: #777; padding: 6px 0; }
.calm-dow div:first-child { color: #d93025; }
.calm-dow div:last-child { color: #1a73e8; }
.calm-day { min-height: 64px; padding: 4px 2px; border-top: 1px solid #eee; cursor: pointer; overflow: hidden; }
.calm-day.blank { cursor: default; }
.calm-n { width: 26px; height: 26px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.calm-day.sun .calm-n { color: #d93025; }
.calm-day.sat .calm-n { color: #1a73e8; }
.calm-day.today .calm-n { background: #1a73e8; color: #fff; font-weight: 700; }
.calm-day.sel { background: #eef3fd; }
.calm-chip { font-size: 9.5px; line-height: 1.25; border-radius: 3px; padding: 0 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.calm-chip.bday { background: #e67c73; }
.calm-chip.ann { background: #8e63ce; }
.calm-more { font-size: 9.5px; color: #666; text-align: center; }
.calm-list { border-top: 1px solid #ddd; padding: 10px 12px 18px; overflow-y: auto; flex: 1; min-height: 120px; }
.calm-list h3 { margin: 0 0 8px; font-size: 15px; }
.calm-ev { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.calm-ev .cal-av { width: 44px; height: 44px; flex: none; }
.calm-ev .pair { display: flex; align-items: center; gap: 2px; flex: none; }
.calm-ev .pair .cal-av { width: 36px; height: 36px; }
.calm-ev b { display: block; font-size: 15px; }
.calm-ev small { color: #666; }
.calm-empty { color: #888; font-size: 14px; padding: 6px 0; }
.calm-ev.celebrate { background: #fff8e1; border-radius: 10px; padding: 8px; }