/*
 * TODAY-V4: scoped styles for the "Was machen wir heute?" Day Capsule
 * experience (resources/views/frontend/today/index.blade.php).
 *
 * Kept as its own asset file rather than a large inline <style> block
 * inside the view - easier to review/cache/maintain, and it makes the
 * scoping boundary explicit: every rule here is prefixed .today-capsule
 * or .today-* and touches nothing outside this page.
 *
 * TYPOGRAPHY DECISION (V4 ticket §14): audited the site's existing font
 * loading before touching anything - public/frontend/assets/css/style.css
 * already @imports Google Fonts "Inter" (and a decorative "Chewy") for
 * the ENTIRE frontend, used consistently for every heading and body text
 * sitewide. Introducing a second display typeface (e.g. Fraunces) just
 * for this one page would make Today the only page with a different
 * heading font - real, visible inconsistency, not just extra network
 * weight - so this file deliberately uses only the existing "Inter"
 * stack already loaded everywhere, and builds the Day Capsule's visual
 * hierarchy through weight/size/spacing/color instead of a new font.
 */

.today-capsule-section {
    --tc-green: #6eaa89;
    --tc-green-deep: #4d8267;
    --tc-coral: #e8665d;
    --tc-yellow: #f2bd48;
    --tc-turquoise: #9fdfd7;
    --tc-ink: #24312b;
    --tc-muted: #6b7a71;
    --tc-line: #e6ece8;
    --tc-surface: #fffdf8;
    padding: 40px 0 72px;
}

/* ---------- header: eyebrow + subtitle only (no second title) ---------- */

.today-capsule-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 24px;
}
.today-capsule-eyebrow-standalone {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--tc-green-deep);
    margin-bottom: 8px;
}
.today-capsule-lead-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--tc-muted);
    line-height: 1.5;
}

/* ---------- THE CAPSULE (weather orb + message + city/age + CTA, one object) ---------- */

.today-capsule {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: 32px;
    box-shadow: 0 26px 60px -34px rgba(36, 49, 43, .35);
    padding: clamp(24px, 4vw, 40px);
}

.today-capsule-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    opacity: .35;
    z-index: -1;
    pointer-events: none;
    background: var(--tc-turquoise);
    transition: background .4s ease;
}
.today-capsule-glow.g1 { width: 260px; height: 260px; top: -110px; right: -60px; }
.today-capsule-glow.g2 { width: 190px; height: 190px; bottom: -100px; left: -50px; opacity: .22; }

.today-capsule-top {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.today-orb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: linear-gradient(145deg, #fff6d9, var(--tc-yellow));
    box-shadow: inset -8px -10px 18px rgba(195, 140, 34, .16), 0 14px 26px rgba(96, 83, 42, .16);
    transition: background .4s ease, box-shadow .4s ease;
}
.today-orb i { font-size: 32px; color: #fff; text-shadow: 0 4px 10px rgba(43, 60, 51, .18); }

/* Weather mood variants - see index.blade.php's $weatherMood mapping.
   Only ever applied from real WeatherContext data, never guessed. */
.today-capsule.mood-rain .today-orb {
    background: linear-gradient(145deg, #eaf7f5, var(--tc-turquoise));
    box-shadow: inset -8px -10px 18px rgba(44, 112, 108, .14), 0 14px 26px rgba(68, 108, 105, .16);
}
.today-capsule.mood-rain .today-capsule-glow.g1 { background: var(--tc-turquoise); }
.today-capsule.mood-snow .today-orb {
    background: linear-gradient(145deg, #ffffff, #e2edf5);
    box-shadow: inset -8px -10px 18px rgba(140, 160, 180, .16), 0 14px 26px rgba(90, 105, 125, .14);
}
.today-capsule.mood-snow .today-orb i { color: #6c8aa8; }
.today-capsule.mood-snow .today-capsule-glow.g1 { background: #cfe1ee; }
.today-capsule.mood-storm .today-orb {
    background: linear-gradient(145deg, #efe8fb, #b9bdd8);
    box-shadow: inset -8px -10px 18px rgba(80, 80, 110, .2), 0 14px 26px rgba(70, 70, 100, .2);
}
.today-capsule.mood-storm .today-capsule-glow.g1 { background: #9aa0c9; }
.today-capsule.mood-sunny .today-orb {
    background: linear-gradient(145deg, #fff6d9, var(--tc-yellow));
    box-shadow: inset -8px -10px 18px rgba(195, 140, 34, .18), 0 14px 26px rgba(96, 83, 42, .18);
}
.today-capsule.mood-sunny .today-capsule-glow.g1 { background: var(--tc-coral); opacity: .18; }
.today-capsule.mood-neutral .today-orb {
    background: linear-gradient(145deg, #f3f6f4, #d9e2dd);
    box-shadow: inset -8px -10px 18px rgba(120, 135, 128, .14), 0 14px 26px rgba(90, 105, 98, .12);
}
.today-capsule.mood-neutral .today-orb i { color: #8a9890; text-shadow: none; }
.today-capsule.mood-neutral .today-capsule-glow.g1 { background: var(--tc-green); opacity: .16; }

.today-capsule-copy { flex: 1 1 260px; min-width: 0; }

.today-capsule-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--tc-green-deep);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.today-capsule-title {
    margin: 0 0 6px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--tc-ink);
    letter-spacing: -.01em;
}

.today-capsule-subtitle {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--tc-muted);
    max-width: 62ch;
}

.today-capsule-message {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tc-ink);
    max-width: 60ch;
}

.today-capsule-meta {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.today-capsule-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffffc7;
    border: 1px solid var(--tc-line);
    color: var(--tc-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.today-capsule-meta.is-muted span { color: var(--tc-muted); }

/* ---------- controls row: city chip + age chip + CTA ---------- */

.today-capsule-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--tc-line);
}

.today-chip-field {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px 0 16px;
    background: #fff;
    border: 1.5px solid var(--tc-line);
    border-radius: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.today-chip-field:focus-within {
    border-color: var(--tc-green);
    box-shadow: 0 0 0 3px rgba(110, 170, 137, .18);
}
.today-chip-field .today-chip-icon { flex: 0 0 auto; font-size: 15px; color: var(--tc-green-deep); }
.today-chip-field .today-chip-label {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tc-muted);
}
.today-chip-field.today-chip-age { flex: 0 1 220px; }

/* Age control: a plain, accessible native <select> dressed as a chip -
   no custom popover JS, per the ticket's explicit "do not over-engineer"
   instruction. */
.today-chip-age select {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tc-ink);
    padding: 0;
    height: 50px;
    appearance: none;
}
.today-chip-age select:focus { outline: none; }

.today-capsule-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 16px;
    background: var(--tc-green);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.today-capsule-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(110, 170, 137, .5); }

/* ---------- City field: Select2, dressed as a chip ---------- */

.today-chip-city { padding: 0 6px 0 16px; }
.today-chip-city .select2-container { width: 100% !important; flex: 1; min-width: 0; }
.today-chip-city .select2-container .select2-selection--single {
    height: 50px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
}
.today-chip-city .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tc-ink);
}
.today-chip-city .select2-container .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 4px;
}

/* ---------- TODAY-V4 SELECT2 CONTRAST FIX ----------
   Root cause (carried over from the V3 audit, reimplemented cleanly
   here): Select2 appends its dropdown to <body>, OUTSIDE
   .today-capsule-section's DOM subtree. CSS custom properties defined
   on this section (--tc-green etc.) do NOT inherit into that detached
   dropdown, so a rule like `background: var(--tc-green)` there silently
   fails to resolve while Select2's own base stylesheet's
   `color: white` for the same selector still applies - white text on an
   effectively transparent/white background.

   Fixed by: (1) tagging the dropdown with dropdownCssClass:
   'today-city-dropdown' (see today-capsule.js) so every rule below is
   scoped to THIS page's dropdown only - no global Select2 regression on
   any other page using the library's default theme; (2) plain hex
   colors throughout, never var(), since this styles DOM detached from
   .today-capsule-section; (3) explicit coverage for every state this
   ticket lists: normal, hover, keyboard highlight (Select2 uses the
   same --highlighted class for both), selected-not-highlighted,
   selected-and-highlighted, disabled, the search field, and the closed
   selection's own rendered value (handled above, inside
   .today-capsule-section, where the CSS variables DO resolve). */
.today-city-dropdown.select2-dropdown {
    border-color: #dfe7e2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(36, 49, 43, .14);
}
.today-city-dropdown .select2-search--dropdown {
    padding: 10px;
    background: #ffffff;
}
.today-city-dropdown .select2-search--dropdown .select2-search__field {
    min-height: 42px;
    border: 1px solid #dfe7e2 !important;
    border-radius: 10px;
    padding: 8px 12px;
    background: #ffffff;
    color: #24312b;
}
.today-city-dropdown .select2-results__options { max-height: 260px; }
/* Normal option (explicit and defensive - never inherit an unreadable color). */
.today-city-dropdown .select2-results__option {
    padding: 10px 14px;
    background: #ffffff;
    color: #24312b;
}
/* Hover + keyboard highlight (Select2 uses one class for both). */
.today-city-dropdown .select2-results__option--highlighted[aria-selected] {
    background: #e9f5ef;
    color: #1c2b23;
}
/* Already-selected option, not currently hovered/keyboard-focused. */
.today-city-dropdown .select2-results__option[aria-selected=true] {
    background: rgba(110, 170, 137, .18);
    color: #1c2b23;
}
/* Selected AND hovered/keyboard-highlighted at the same time. */
.today-city-dropdown .select2-results__option--highlighted[aria-selected=true] {
    background: #6eaa89;
    color: #ffffff;
}
.today-city-dropdown .select2-results__option[aria-disabled=true] {
    background: #ffffff;
    color: #a3aca6;
}

/* ---------- helper line under the capsule (no city selected yet) ---------- */

.today-helper-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 4px 0;
    color: var(--tc-muted);
    font-size: 14px;
}
.today-helper-line i { color: var(--tc-green); }

/* ---------- empty state: city selected, no matches ---------- */

.today-no-results {
    margin-top: 20px;
    padding: 24px 26px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.today-no-results-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eef8f3;
    color: var(--tc-green-deep);
    font-size: 18px;
}
.today-no-results-copy { flex: 1 1 260px; }
.today-no-results-copy h3 { margin: 0 0 4px; font-size: 16px; color: var(--tc-ink); }
.today-no-results-copy p { margin: 0; font-size: 13.5px; color: var(--tc-muted); }
.today-no-results-cta {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tc-green-deep);
    text-decoration: none;
    border-bottom: 2px solid var(--tc-green);
    padding-bottom: 2px;
}

/* ---------- results: featured + secondary ---------- */

.today-results { margin-top: 34px; }
.today-results-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.today-results-heading h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--tc-ink); }
.today-results-heading .today-results-count { font-size: 13px; font-weight: 700; color: var(--tc-muted); }

.today-featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px -22px rgba(36, 49, 43, .3);
    margin-bottom: 24px;
}
.today-featured-media {
    position: relative;
    min-height: 220px;
    background: linear-gradient(135deg, #eef6f2, #f7faf8);
}
.today-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.today-featured-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #aab8b0; font-size: 34px; }
.today-featured-badges { position: absolute; left: 16px; top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.today-badge {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    background: rgba(255, 255, 255, .94);
    color: var(--tc-ink);
    box-shadow: 0 6px 14px rgba(35, 48, 41, .1);
}
.today-badge.is-tip { background: var(--tc-coral); color: #fff; }
.today-badge.is-available { background: #eaf7ef; color: #3f7b58; }
.today-badge.is-limited { background: #f3f1ea; color: #7a7362; }
.today-badge.is-weather-fit { background: var(--tc-turquoise); color: #0d3a34; }
.today-featured-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.today-featured-eyebrow { font-size: 12px; font-weight: 700; color: var(--tc-muted); display: flex; align-items: center; gap: 6px; }
.today-featured-body h3 { margin: 0; font-size: 23px; font-weight: 800; color: var(--tc-ink); line-height: 1.25; }
.today-featured-body h3 a { color: inherit; text-decoration: none; }
.today-featured-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.today-rating { font-weight: 800; font-size: 13.5px; color: var(--tc-ink); }
.today-rating i { color: var(--tc-yellow); }
.today-rating small { color: var(--tc-muted); font-weight: 600; }
.today-price { color: var(--tc-muted); font-size: 13px; }
.today-featured-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--tc-green);
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
}
.today-featured-go:hover { background: var(--tc-green-deep); color: #fff; }

.today-secondary-heading { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tc-muted); text-transform: uppercase; margin: 0 0 12px; }
.today-secondary-list { display: flex; flex-direction: column; gap: 10px; }
.today-secondary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 18px;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.today-secondary-card:hover { box-shadow: 0 12px 26px -16px rgba(36, 49, 43, .3); transform: translateY(-1px); }
.today-secondary-thumb {
    flex: 0 0 68px;
    height: 68px;
    border-radius: 14px;
    background: #eef3f0;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #aab8b0;
}
.today-secondary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.today-secondary-body { flex: 1; min-width: 0; }
.today-secondary-body h4 { margin: 0 0 5px; font-size: 15px; font-weight: 800; color: var(--tc-ink); }
.today-secondary-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.today-secondary-tags span {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tc-muted);
    background: #f3f6f4;
    border: 1px solid var(--tc-line);
    padding: 3px 9px;
    border-radius: 999px;
}
.today-secondary-arrow { flex: 0 0 auto; color: var(--tc-green-deep); font-size: 16px; }

@media (max-width: 991.98px) {
    .today-featured-card { grid-template-columns: 1fr; }
    .today-featured-media { min-height: 190px; }
}

@media (max-width: 767.98px) {
    .today-capsule-controls { flex-direction: column; }
    .today-chip-field, .today-chip-field.today-chip-age { flex: 1 1 auto; width: 100%; }
    .today-capsule-cta { width: 100%; }
    .today-capsule-meta { display: none; }
}

@media (max-width: 575.98px) {
    .today-capsule-section { padding: 26px 0 54px; }
    .today-capsule { padding: 22px 18px; border-radius: 26px; }
    .today-capsule-title { font-size: 27px; }
    .today-orb { width: 60px; height: 60px; }
    .today-orb i { font-size: 26px; }
    .today-featured-body { padding: 20px; }
    .today-no-results { flex-direction: column; align-items: flex-start; }
}