/* ============================================================
   Bake Cook & Create by Allie C — Schedule Stylesheet
   Covers: schedule/home page — week grid, freshness promise,
           journey strip, pillars, order window callout, legend
   Requires styles-optimized.css to be loaded first for
   :root tokens, body, nav, footer, section commons.
   ============================================================ */


/* ── SECTION BRIDGE ─────────────────────────────────────────── */
.section-bridge {
  position: relative;
  text-align: center;
  padding: 3rem clamp(1.5rem, 5vw, 3rem);
  overflow: hidden;
}
.section-bridge::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,131,74,.25), transparent);
}

.bridge-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg);
  padding: 0 1.5rem;
}
.bridge-label span {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caramel);
}
.bridge-ornament {
  color: var(--caramel);
  opacity: .4;
  font-size: 1rem;
}


/* ── TODAY BANNER ───────────────────────────────────────────── */
.today-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--parchment);
  border: 1px solid rgba(181,131,74,.2);
  border-radius: 50px;
  padding: .6rem 1.5rem;
  margin: 0 auto 3rem;
  width: fit-content;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown-dark);
  opacity: .85;
}

.today-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--caramel);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}


/* ── WEEK GRID ──────────────────────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .75rem;
  margin-bottom: 3rem;
}

@media (min-width: 901px) {
  .week-grid-outer {
    margin-left:  calc(-1 * clamp(1.5rem, 5vw, 3rem));
    margin-right: calc(-1 * clamp(1.5rem, 5vw, 3rem));
  }
}

.day-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 1.4rem 1rem 1.6rem;
  display: flex; flex-direction: column; gap: .75rem;
  position: relative; overflow: hidden;
  border: 1px solid transparent;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.day-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stripe-color, transparent);
}
.day-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  border-color: var(--stripe-color, transparent);
}

.day-card.rest    { --stripe-color: #8b7355; }
.day-card.bake    { --stripe-color: var(--caramel); }
.day-card.pack    { --stripe-color: #a89070; }
.day-card.deliver { --stripe-color: var(--rose); }
.day-card.open    { --stripe-color: #7aaa7a; }
.day-card.closing { --stripe-color: #c09050; }

.day-card.is-today {
  border-color: var(--stripe-color);
  background: #361c0a;
  box-shadow: 0 0 0 1px var(--stripe-color), 0 12px 40px rgba(0,0,0,.3);
}
.day-card.is-today .today-tag { display: flex; }

.today-tag {
  display: none;
  align-items: center; gap: .35rem;
  position: absolute; top: .75rem; right: .75rem;
  font-family: 'Jost', sans-serif; font-size: .58rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--parchment);
  background: rgba(243,237,225,.12);
  padding: .2rem .5rem; border-radius: 50px;
}
.today-tag-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

.day-name  { font-family: 'Jost', sans-serif; font-size: .65rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,237,225,.4); }
.day-icon  { font-size: 1.5rem; line-height: 1; }
.day-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500; color: var(--parchment); line-height: 1.25; }
.day-desc  { font-family: 'Jost', sans-serif; font-size: .82rem; font-weight: 300; line-height: 1.65; color: rgba(243,237,225,.78); flex: 1; }

.day-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: 'Jost', sans-serif; font-size: .6rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 50px; border: 1px solid;
  width: fit-content;
}
.badge-rest    { color: #b89e7a;        border-color: rgba(184,158,122,.25); background: rgba(184,158,122,.08); }
.badge-bake    { color: var(--caramel); border-color: rgba(181,131,74,.25);  background: rgba(181,131,74,.08);  }
.badge-pack    { color: #c0a880;        border-color: rgba(192,168,128,.25); background: rgba(192,168,128,.08); }
.badge-deliver { color: var(--rose);    border-color: rgba(196,128,110,.25); background: rgba(196,128,110,.08); }
.badge-open    { color: #7aaa7a;        border-color: rgba(122,170,122,.25); background: rgba(122,170,122,.08); }
.badge-closing { color: #c09050;        border-color: rgba(192,144,80,.25);  background: rgba(192,144,80,.08);  }


/* ── ORDER WINDOW CALLOUT ───────────────────────────────────── */
.order-window {
  background: var(--parchment);
  border-radius: 18px;
  padding: 2rem 2.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  border: 1px solid rgba(181,131,74,.2);
  margin-bottom: 2rem;
}
.order-window-title    { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--brown-dark); margin-bottom: .35rem; }
.order-window-title em { font-style: italic; color: var(--caramel); }
.order-window-sub      { font-family: 'Jost', sans-serif; font-size: .82rem; color: var(--brown-dark); opacity: .6; line-height: 1.6; }

.order-window-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--caramel); color: #faf7f2;
  font-family: 'Jost', sans-serif; font-size: .78rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: .8rem 1.8rem; border-radius: 50px; white-space: nowrap;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 18px rgba(181,131,74,.28);
}
.order-window-cta:hover  { background: var(--brown-dark); transform: translateY(-2px); }
.order-window-cta.closed { background: rgba(61,43,26,.12); color: rgba(61,43,26,.45); box-shadow: none; pointer-events: none; }


/* ── LEGEND ─────────────────────────────────────────────────── */
.legend {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(61,43,26,.08);
}
.legend-item {
  display: flex; align-items: center; gap: .45rem;
  font-family: 'Jost', sans-serif; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown-dark); opacity: .55;
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }


/* ── FRESHNESS PROMISE — SECTION WRAPPER ────────────────────── */
.freshness-section {
  background: var(--parchment);
  border-radius: var(--radius-lg);
  margin: 0 clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(4rem, 8vw, 7rem) 0 clamp(1.5rem, 6vw, 5rem);
}


/* ── FRESHNESS PROMISE — JOURNEY STRIP ─────────────────────── */
.journey-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 0;
  background: var(--card-bg);
  border-radius: 18px; overflow: hidden;
  margin-bottom: 3rem;
}

.journey-step { padding: 2rem 1.5rem; text-align: center; position: relative; }

.journey-step-highlight { background: #1e1108; position: relative; }
.journey-step-highlight::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--caramel), var(--rose));
}

.journey-arrow { color: rgba(243,237,225,.15); font-size: 1.2rem; padding: 0 .25rem; flex-shrink: 0; }

.journey-icon  { font-size: 1.8rem; display: block; margin-bottom: .75rem; }

.journey-day {
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 500;
  color: var(--caramel); display: block; margin-bottom: .2rem;
}
.journey-step-highlight .journey-day {
  background: linear-gradient(135deg, var(--caramel), var(--rose));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.journey-label { font-family: 'Jost', sans-serif; font-size: .65rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(243,237,225,.4); display: block; margin-bottom: .6rem; }
.journey-desc  { font-family: 'Jost', sans-serif; font-size: .75rem; font-weight: 300; line-height: 1.6; color: rgba(243,237,225,.5); }


/* ── FRESHNESS PROMISE — PILLARS ────────────────────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-bottom: 2.5rem;
}

.pillar-card {
  background: var(--bg);
  border-radius: calc(var(--radius-lg) - 6px);
  padding: 1.8rem 1.6rem;
  border: 1px solid rgba(181,131,74,.12);
  border-top: 3px solid var(--caramel);
  transition: transform .25s, box-shadow .25s;
}
.pillar-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(61,43,26,.08); }

.pillar-icon  { font-size: 1.7rem; display: block; margin-bottom: 1rem; }
.pillar-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 500; color: var(--brown-dark); margin-bottom: .6rem; }
.pillar-body  { font-family: 'Jost', sans-serif; font-size: .84rem; line-height: 1.72; color: var(--brown-dark); opacity: .65; }


/* ── FRESHNESS PROMISE — QUOTE CARD ─────────────────────────── */
.promise-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  position: relative; overflow: hidden; margin-bottom: 1.5rem;
}
.promise-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%,    rgba(181,131,74,.08)  0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(196,128,110,.06) 0%, transparent 55%);
}

.promise-quote-mark {
  font-family: 'Cormorant Garamond', serif; font-size: 10rem;
  line-height: .5; color: var(--caramel); opacity: .1;
  position: absolute; top: 1.5rem; left: 2rem;
  pointer-events: none; user-select: none;
}

.promise-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem); font-weight: 300; font-style: italic;
  line-height: 1.6; color: var(--parchment);
  position: relative; max-width: 680px; margin-bottom: 1.2rem;
}

.promise-cite { font-family: 'Jost', sans-serif; font-size: .72rem; font-style: normal; letter-spacing: .15em; text-transform: uppercase; color: var(--caramel); opacity: .8; }


/* ── CARE TIP ────────────────────────────────────────────────── */
.care-tip {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--bg); border-radius: calc(var(--radius-lg) - 6px);
  padding: 1.4rem 1.6rem; border: 1px solid rgba(181,131,74,.15);
}
.care-tip-icon  { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.care-tip-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500; color: var(--brown-dark); margin-bottom: .35rem; }
.care-tip-body  { font-family: 'Jost', sans-serif; font-size: .84rem; line-height: 1.7; color: var(--brown-dark); opacity: .68; }


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .week-grid      { grid-template-columns: repeat(4, 1fr); }
  .pillars-grid   { grid-template-columns: 1fr 1fr; }
  .journey-strip  { grid-template-columns: 1fr; }
  .journey-arrow  { display: none; }
}

@media (max-width: 600px) {
  .week-grid    { grid-template-columns: 1fr 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .order-window { flex-direction: column; text-align: center; }
}

@media (max-width: 380px) {
  .week-grid { grid-template-columns: 1fr; }
}