/* --- Container & Layout --- */
.wedding-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  gap: clamp(1rem, 2vw, 1.5rem); /* Slightly increased gap for breathability */
  padding: clamp(3rem, 6vw, 5rem);
  color: #6C8198;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.calendar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reduced gap slightly to connect the time/year to the main date */
  gap: clamp(1.5rem, 4vw, 3rem); 
  width: 100%;
  max-width: 600px; /* Increased slightly to give the text room */
}

/* --- Side Columns (Time & Year) --- */
.time, .year {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #849CB2;
  /* Adjusted font size for better hierarchy vs the main date */
  font-size: clamp(0.85rem, 1.5vw, 1rem); 
  font-weight: 500;
  letter-spacing: 0.1em; /* Increased tracking for elegance */
  text-transform: uppercase; /* Uppercase adds a premium feel */
}

.hour, .year div {
  font-weight: 400; /* Lighter weight looks more expensive */
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: #5D7285; /* Slightly darker for readability */
  margin: 0.2rem 0;
}

/* --- The Divider Lines --- */
.line {
  width: clamp(1.5rem, 4vw, 2.5rem);
  height: 1px; /* DESIGN FIX: Hairline thin looks more elegant */
  background-color: #B0C4D6; /* Lighter color so lines are subtle */
  margin: 0.4rem 0;
  opacity: 0.7;
}

/* --- Center Date Column --- */
.day-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #849CB2;
  gap: 0; /* Remove gap to tighten the vertical stack */
  text-align: center;
  position: relative;
}

.day-of-week {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.2em; /* Wide tracking is very editorial */
  margin-bottom: -0.5rem; /* Pull closer to the number */
  text-transform: uppercase;
  color: #849CB2;
}

.day {
  font-size: clamp(5rem, 12vw, 7.5rem); /* Make the number the undeniable HERO */
  font-weight: 400; /* Thinner font weight for large numbers looks classier */
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: #4A6270;
  font-family: 'DM Sans', sans-serif; /* Ensure it uses the nice sans */
}

.month {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.25em; /* Match day-of-week tracking */
  text-transform: uppercase;
  margin-top: -0.5rem; /* Pull closer to the number */
  color: #849CB2;
}

/* --- The CTA Button (The "Pill") --- */
.calendar-btn {
  display: inline-block;
  text-decoration: none;
  background-color: #FFD6A6; 
  color: #8D7042;
  /* DESIGN FIX: Pill shape is friendlier for weddings */
  border-radius: 50px; 
  padding: clamp(0.8rem, 1.2vw, 1rem) clamp(2rem, 3vw, 2.5rem);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: clamp(2.5rem, 4vw, 3.5rem); /* More whitespace above button */
  border: 1px solid transparent; /* Prepare for hover state */
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 214, 166, 0.4); /* Colored shadow adds glow */
}

.calendar-btn:hover {
  background-color: #f8c283; /* Invert on hover */
  color: #4e2b02;
  font-weight: bolder;
  border-color: #FFD6A6;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 214, 166, 0.6);
}

/* --- Mobile Tweak --- */
@media (max-width: 600px) {
  .calendar-row {
    flex-direction: column; /* Stack them on very small screens? */
    /* Actually, for the date, keeping them in a row usually works best 
       unless the screen is tiny. If you prefer stacking: */
    /* gap: 1.5rem; */
  }
  
  /* If keeping row layout on mobile, scale down lines */
  .line { width: 1.5rem; }
}