/* The full calendar shares the cream, forest, lime and blue club palette. */
.calendar-view-switch { display: flex; gap: .3rem; width: fit-content; margin: 0 0 1rem; padding: .25rem; border: 1px solid #d3dfc5; border-radius: 30px; color: #47663c; background: #e5ecd9; }
.calendar-view-switch > * { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1rem; border-radius: 25px; font-size: .8rem; }
.calendar-view-switch > [aria-current=page] { color: #f3fadd; background: #174a31; }
.calendar-view-switch .icon { width: 1.1rem; height: 1.1rem; }
.calendar-view-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.calendar-view-links .full-width-link { justify-content: center; gap: .5rem; padding-inline: .6rem; font-size: .73rem; }
.calendar-view-links .full-width-link + .full-width-link { border-left: 1px solid #e0edc925; }
.detail-dialog[data-view="calendar"] { width: min(calc(100% - 1.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 60rem); --dialog-surface: #f1f4e9; border-color: #e8f2d8; }
.detail-dialog[data-view="calendar"] .dialog-header { padding: 1.4rem 1rem .85rem; }
.detail-dialog[data-view="calendar"] .dialog-eyebrow { max-width: calc(100% - 2rem); font-size: .55rem; line-height: 1.6; letter-spacing: .13em; }
.detail-dialog[data-view="calendar"] .dialog-header h2 { margin: .45rem 0 0; font-size: 1.9rem; }
.detail-dialog[data-view="calendar"] #dialog-content { padding: 1rem .75rem; }
.month-calendar-layout { display: grid; gap: 1rem; }
.month-calendar-layout > * { min-width: 0; }
.month-calendar { padding: .9rem .45rem .8rem; border: 1px solid #41603713; border-radius: 22px; background: linear-gradient(135deg, #e9efdfb8, #fcfdf8); }
.month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .25rem; padding-inline: .1rem; }
.month-arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; padding: .7rem; border: 1px solid #20472a16; border-radius: 50%; color: #153b27; background: #ffffffbd; box-shadow: 0 3px 10px #163e1f06; }
.month-arrow .icon { width: 1.15rem; height: 1.15rem; }
.previous-month .icon { transform: rotate(180deg); }
.month-arrow:disabled { opacity: .3; box-shadow: none; }
.calendar-month-picker { position: relative; display: flex; align-items: center; min-width: 0; }
.calendar-month-picker select { min-width: 0; max-width: 100%; width: 100%; min-height: 2.75rem; border: 0; border-radius: 10px; padding: .35rem 1.4rem .35rem .2rem; appearance: none; color-scheme: light; color: #173d28; background: transparent; font-size: clamp(.95rem, 4.1vw, 1.4rem); font-weight: 700; letter-spacing: -.045em; text-align: center; cursor: pointer; }
.calendar-month-picker > .icon { position: absolute; right: .25rem; width: .85rem; height: .85rem; pointer-events: none; transform: rotate(90deg); }
#dialog-content .calendar-month-summary { margin: .65rem 0 .7rem; color: #64745d; text-align: center; font-size: .66rem; }
.month-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: .2rem .35rem; }
.month-grid th { padding: .4rem 0 .55rem; color: #687760; font-size: .61rem; font-weight: 500; }
.month-grid abbr { text-decoration: none; }
.month-grid td { padding: 0; text-align: center; }
.month-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 2.8rem; gap: .2rem; padding: .4rem .1rem .25rem; border: 1px solid #37512b0a; border-radius: 11px; background: #ffffffaa; color: #163d28; font-size: .87rem; font-weight: 550; line-height: 1.1; }
.month-day.outside-month { background: #ffffff24; color: #8f9b87; font-weight: 400; padding-bottom: .75rem; }
.calendar-dots { display: flex; justify-content: center; gap: .15rem; min-height: .35rem; }
.event-dot { display: inline-block; flex-shrink: 0; width: .35rem; height: .35rem; border-radius: 50%; background: #2f7040; }
.event-dot.round { background: #5a831e; }
.event-dot.tour { background: #247ec4; }
.event-dot.deadline { background: #c67b18; }
.month-day.has-events { font-weight: 750; border-color: #55753a23; }
.month-day[aria-current="date"] { box-shadow: inset 0 0 0 1px #4e7953; }
.month-day[aria-pressed="true"] { color: #10361e; background: var(--lime); border-color: #bbe82a; }
.month-day[aria-pressed="true"] .event-dot { background: #133f27; }
.month-day:focus-visible { position: relative; z-index: 1; outline-offset: 1px; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .85rem; margin: .8rem 0 0; padding: .7rem .2rem 0; border-top: 1px solid #28452613; list-style: none; color: #52684c; font-size: .59rem; }
.calendar-legend li { display: inline-flex; align-items: center; gap: .3rem; }
.calendar-legend .event-dot.round { background: var(--lime); border: 1px solid #719d25; }
.calendar-feature { position: relative; isolation: isolate; overflow: hidden; min-height: 18.5rem; border: 1px solid #365b2821; border-radius: 22px; background: #e9f0e4; }
.calendar-feature-photo { position: absolute; z-index: -2; inset: 0 0 0 29%; background-image: url("/assets/img/club/sign-in-golfer.png"); background-size: cover; background-position: 55% 30%; }
.calendar-feature::after { position: absolute; z-index: -1; content: ''; inset: 0; background: linear-gradient(90deg, #f5f7ed 5%, #f5f7edf7 32%, #f5f7edc7 48%, #f5f7ed16 88%); }
.calendar-feature[data-kind="tour"] .calendar-feature-photo { inset: 0; background-image: var(--tour-image); background-position: 70% center; }
.calendar-feature[data-kind="deadline"] .calendar-feature-photo { background-image: var(--next-event-image); background-position: center; }
.calendar-feature-copy { padding: 1.1rem 1rem; }
.calendar-feature-badge { display: inline-flex; align-items: center; max-width: 75%; padding: .38rem .5rem; border-radius: 7px; background: var(--lime); color: #153a22; font-size: .54rem; font-weight: 700; line-height: 1.3; }
.calendar-feature[data-kind="tour"] .calendar-feature-badge { background: #c7e6fb; color: #124467; }
.calendar-feature[data-kind="deadline"] .calendar-feature-badge { background: #f8d69d; color: #5a3c16; }
#dialog-content .calendar-feature h3 { max-width: 69%; margin: 1rem 0 .8rem; color: #143d28; font-size: clamp(1.5rem, 6.2vw, 2rem); font-weight: 750; line-height: 1.06; letter-spacing: -.045em; overflow-wrap: anywhere; }
.calendar-feature h3 > span { display: inline-block; margin-top: .35rem; font-size: .65em; font-weight: 500; }
.calendar-feature-facts { display: flex; flex-direction: column; gap: .6rem; width: 70%; margin: 0 0 1.15rem; padding: 0; list-style: none; color: #4d6451; font-size: .68rem; line-height: 1.45; }
.calendar-feature-facts li { display: flex; align-items: flex-start; gap: .4rem; }
.calendar-feature-facts .icon { flex-shrink: 0; width: .95rem; height: .95rem; }
.calendar-view-event { justify-content: space-between; max-width: 100%; min-width: 10rem; gap: 1rem; min-height: 2.9rem; padding: .6rem .9rem; border-radius: 100px; font-size: .73rem; }
.calendar-going { position: absolute; right: .75rem; top: .75rem; display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-radius: 12px; background: #073f2beb; color: #f5fbea; box-shadow: 0 5px 15px #08271912; }
.calendar-going > .icon { width: 1.1rem; height: 1.1rem; }
.calendar-going strong, .calendar-going small { display: block; line-height: 1.2; text-align: center; }
.calendar-going strong { font-size: 1rem; }
.calendar-going small { margin-top: .1rem; font-size: .54rem; }
.calendar-selected-events { display: flex; flex-direction: column; gap: .8rem; }
.calendar-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 18.5rem; padding: 1.3rem; border: 1px solid #2947281c; border-radius: 22px; background: #e5edda; }
.calendar-empty-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #d4e2c6; color: #345c2c; }
#dialog-content .calendar-feature-kicker { margin: 1rem 0 .6rem; font-size: .65rem; color: #47603d; }
#dialog-content .calendar-empty h3 { margin: 0; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.035em; }
#dialog-content .calendar-empty > p:not(.calendar-feature-kicker) { font-size: .8rem; color: #52684b; }
.calendar-empty .primary-button { margin-top: .5rem; border-radius: 100px; font-size: .7rem; }
#dialog-content .calendar-preview-note { margin: 1rem .2rem 0; font-size: .62rem; line-height: 1.6; color: #627257; text-align: center; }
.calendar-return { margin: .4rem 0 1rem; }
.calendar-return .icon { transform: rotate(180deg); }
@media (min-width: 600px) {
  .detail-dialog[data-view="calendar"] .dialog-header { padding: 1.7rem 1.7rem 1rem; }
  .detail-dialog[data-view="calendar"] #dialog-content { padding: 1.2rem 1.5rem; }
  .month-calendar { padding: 1rem; }
  .month-grid { border-spacing: .35rem .45rem; }
  .month-day { min-height: 3.35rem; font-size: 1rem; border-radius: 13px; }
  .month-grid th { font-size: .75rem; }
  .calendar-month-picker select { font-size: 1.6rem; }
  .calendar-feature-copy { padding: 1.5rem; }
  #dialog-content .calendar-feature h3 { font-size: 2rem; }
  .calendar-feature-facts { font-size: .8rem; }
  .calendar-feature-badge { font-size: .63rem; }
  .calendar-going { right: 1rem; top: 1rem; }
  .calendar-legend { font-size: .67rem; }
}
@media (min-width: 850px) {
  .month-calendar-layout { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
  .calendar-feature { flex: 1; min-height: 28rem; display: flex; align-items: flex-end; }
  .calendar-feature-photo { inset: 0; background-position: 55% 25%; }
  .calendar-feature::after { background: linear-gradient(180deg, #f5f7ed00 32%, #f5f7ed90 52%, #f5f7edeb 64%, #f5f7ed 94%); }
  .calendar-feature-copy { width: 100%; padding: 1.3rem; }
  #dialog-content .calendar-feature h3 { max-width: 100%; font-size: 2.1rem; }
  .calendar-feature-facts { width: 100%; }
  .calendar-feature-badge { max-width: 100%; }
  .calendar-going { padding: .65rem .8rem; }
  .calendar-going strong { font-size: 1.2rem; }
  .calendar-going small { font-size: .62rem; }
  .calendar-empty { flex: 1; }
}
@media (max-width: 359px) {
  .detail-dialog[data-view="calendar"] #dialog-content { padding-inline: .5rem; }
  .month-calendar { padding-inline: .25rem; }
  .month-grid { border-spacing: .15rem .3rem; }
  .calendar-month-picker select { font-size: .9rem; }
  .month-day { border-radius: 9px; font-size: .8rem; }
  .calendar-feature-copy { padding-inline: .8rem; }
  #dialog-content .calendar-feature h3 { max-width: 70%; font-size: 1.4rem; }
}
@media (hover: hover) {
  .month-arrow:hover:not(:disabled) { background: #ddedc6; }
  .month-day:hover:not([aria-pressed="true"]) { background: #e5eed5; border-color: #94af72; }
}