:root {
  --calendar-body-bg: rgb(6, 6, 6); /*not visible  unless there is padding, then it looks like a border.*/
  --cal-header-bg: rgb(162, 115, 191); 
  --cal-weeks-bg: rgb(95, 83, 117); /*Header*/
  --cal-weeks-color: white;
  --cal-dates-bg: rgb(180, 166, 180); /*bars between dates*/
  --cal-dates-day-bg: rgb(255, 255, 255); /*date bg color*/
  --cal-dates-gap: 2px;
  --cal-dates-margin: 5px;
  --cal-non-date: rgb(162, 162, 162);
}
.calendar-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  
  padding: 10px;
border-width: 2px;
border-color: black;
border-style: solid;
  background-color: rgb(223, 161, 223);
  
    object-fit: contain;
}
.calendar-body {
  padding: 2px;
  display: flex;
  flex-direction: column;
  background-color: var(--calendar-body-bg);
  min-height: 100%;
  width: 500px;
  max-width: 100%;
}


.cal-header {
  flex: 1;
  display: flex;
  background-color: var(--cal-header-bg);
  position: relative;
  overflow: hidden; /* ensures no overflow artifacts */
  justify-content: center;
  align-items: center;
}

.cal-dates {
  flex: 4;
  background-color: var(--cal-dates-bg);
  display: flex;
  position: relative;
  overflow: hidden; /* ensures no overflow artifacts */
  justify-content: center;
  align-items: center;
}

.cal-weeks {
  flex: 1;
  min-height: 15%;
  background-color: var(--cal-weeks-bg);
  display: flex;
  position: relative;
  overflow: hidden; /* ensures no overflow artifacts */
  justify-content: center;
  align-items: center;
}


.dates-container{
  display: grid;
  margin:  var(--cal-dates-margin);
  gap: var(--cal-dates-gap);
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: calc(100% - (0 * var(--cal-dates-margin)) - (6 *  var(--cal-dates-gap)));
  height: calc(100% - var(--cal-dates-margin) * 2);
}

.weeks-container{
  display: flex;
  margin:  var(--cal-dates-margin);
  gap: var(--cal-dates-gap);
  width: calc(100% - (0 * var(--cal-dates-margin)) - (6 *  var(--cal-dates-gap)));
}

.weeks-container .weekday {
  flex: 1;
  font-family: 'BaiJamjuree', sans-serif;
  font-size: 1em;
  color: var(--cal-weeks-color);
  text-align: center;
}


.cal-dates .date {
     position: relative;
  background-color: var(--cal-dates-day-bg);
  display: flex;
  aspect-ratio: 1 / 1;

}


.date .day-number{
  position: absolute;
   top: 0;
   left: 0;
  width: 100%;
  z-index: 1;
}

.date .sticker{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  justify-content: center;
}

.date .sticker-quad {
    width: 100%;
    height: 100%;
    display: grid;
    overflow: visible; /* allow images to overflow grid cells */
    grid-template-columns: 1fr 1fr; /* 2 columns */
    place-items: center;            /* center each img in its cell */
    gap: 2px;                       /* optional small gap between images */
    position: relative;
}

.date .sticker-quad img {
    width: 90%;   /* scale images within each cell while maintaining aspect ratio */
    height: 90%;
    object-fit: contain; /* prevent distortion while fitting */
    position: relative;
    
}



.date .sticker img{
    display: flex;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain; /* scale to fit both width & height without overflow */
    z-index: 0;          /* behind the text */
}
.cal-dates .non-date{
  background-color: var(--cal-non-date);
  display: flex;
  aspect-ratio: 1 / 1;
}

.date:hover{
   background-color: red;
}