/* Meals & Pantry pages (meal-plan, pantry, grocery-list, recipes, ollie-meals).
   Few words, big real screenshots. Loaded after sense-theme.css. */

/* Hero photo: the theme's glow behind hero visuals is off here. */
.hero-visual.scene { max-width: 640px; }
.hero-visual.scene::before { display: none; }
.hero-visual.scene > picture { display: block; }
.hero-visual.scene > picture > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(45, 50, 101, 0.35);
}

.meals-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.meals-head .section-lead { margin-bottom: 0; }

/* Tiles: a short title, one line, and a real screenshot running off the bottom. */
.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.tile {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    padding: clamp(1.6rem, 2.6vw, 2.25rem) clamp(1.6rem, 2.6vw, 2.25rem) 0;
    background: var(--surface);
    border-radius: 28px;
    overflow: hidden;
}
.tile--2 { grid-column: span 2; }
.tile--4 { grid-column: span 4; }
.tile--6 { grid-column: span 6; min-height: 0; }
.tile-step {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.tile h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 2.1vw, 1.7rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.tile p {
    margin: 0;
    max-width: 36ch;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tile a { color: inherit; }
.tile-media {
    margin-top: auto;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.tile-media img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: top left;
    background: var(--bg);
    border: 1px solid var(--hair);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 24px 50px -24px rgba(45, 50, 101, 0.3);
}
.tile--6 .tile-media img { height: auto; max-height: 520px; }
/* Phone-shaped screenshots sit centered and narrow. */
.tile-media--phone { display: flex; justify-content: center; }
.tile-media--phone img { width: min(78%, 330px); object-position: top center; }
/* A photo fills the bottom of the tile edge to edge. */
.tile-media--photo { margin: auto calc(-1 * clamp(1.6rem, 2.6vw, 2.25rem)) 0; }
.tile-media--photo img { height: 340px; border: 0; border-radius: 0; box-shadow: none; object-position: center; }
/* A short screenshot (a card or a warning) floats in the tile instead of bleeding. */
.tile-media--float { padding-bottom: clamp(1.6rem, 2.6vw, 2.25rem); }
.tile-media--float img { height: auto; border-bottom: 1px solid var(--hair); border-radius: 16px; }
.tile--ink { background: var(--ink); }
.tile--ink h3 { color: #fff; }
.tile--ink p,
.tile--ink .tile-step { color: rgba(255, 255, 255, 0.72); }

/* One-line notes in a quiet grid, no cards, no icons. */
.notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.notes li { padding: 1.4rem 0; border-top: 1px solid var(--hair); }
.notes h3 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
}
.notes p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Where to go next: three big text links. */
.go-deeper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.go-deeper a {
    display: block;
    padding: 1.75rem;
    border: 1px solid var(--hair);
    border-radius: 22px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.go-deeper a:hover { border-color: rgba(45, 50, 101, 0.28); background: var(--surface); }
.go-deeper strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.go-deeper strong::after { content: ' \2192'; color: var(--ink-faint); }
.go-deeper span { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }

/* Everything, as names only: a spec sheet in columns. */
.spec {
    columns: 4 220px;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.spec-group {
    break-inside: avoid;
    margin: 0 0 2rem;
}
.spec-group h3 {
    margin: 0 0 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--hair);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.spec-group ul { margin: 0; padding: 0; list-style: none; }
.spec-group li {
    padding: 0.3rem 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink);
}

/* Where recipes come from. */
.sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sources li {
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--hair);
    border-radius: 999px;
    font-size: 1.02rem;
    color: var(--ink);
}

.fine {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

@media (max-width: 960px) {
    .tile,
    .tile--2,
    .tile--4 { grid-column: span 3; }
    .tile--6 { grid-column: span 6; }
    .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .tile,
    .tile--2,
    .tile--4,
    .tile--6 { grid-column: auto; min-height: 0; }
    .tile-media img { height: 280px; }
    .notes,
    .go-deeper { grid-template-columns: minmax(0, 1fr); }
}