/* Hero */
.hero { position: relative; height: 70vh; min-height: 500px; overflow: hidden; background: var(--surface-container-lowest); }
.carousel-item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in-out; background-size: cover; background-position: center; }
.carousel-item.active { opacity: 1; }
.vignette { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,19,20,1) 0%, rgba(18,19,20,0.4) 50%, rgba(18,19,20,0) 100%); }
.hero-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--margin-mobile); max-width: 800px; }
@media (min-width: 768px) { .hero-content { padding: var(--margin-desktop); } }
.badge { display: inline-block; background: rgba(41,42,43,0.6); backdrop-filter: blur(4px); padding: 4px 12px; color: var(--secondary); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.hero-title { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; margin-bottom: 1.5rem; color: var(--primary); }
@media (min-width: 768px) { .hero-title { font-size: 4rem; } }
.hero-desc { font-size: 1.125rem; color: var(--on-surface-variant); margin-bottom: 2rem; max-width: 36rem; }
.btn-primary { background: var(--primary); color: var(--on-primary); padding: 1rem 2rem; text-transform: uppercase; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.btn-primary:hover{ background: var(--secondary);  }
.carousel-nav { position: absolute; bottom: var(--margin-mobile); right: var(--margin-mobile); display: flex; gap: 0.5rem; }
.nav-arrow { width: 3rem; height: 3rem; border: 1px solid var(--outline-variant); background: rgba(18,19,20,0.4); backdrop-filter: blur(8px); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.nav-arrow:hover { background: var(--primary); color: var(--on-primary); }

/* Grid */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--outline-variant); margin-bottom: 2.5rem; margin-top: 4rem; }
.section-title { font-family: var(--font-display); font-size: 2rem; color: var(--primary); }
.bento-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(12,1fr); } }
.card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); overflow: hidden; display: flex; flex-direction: column; }
.card-img-wrap { overflow: hidden; aspect-ratio: 16/9; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.card:hover .card-img-wrap img { transform: scale(1.05); }
.card-body { padding: 1.5rem; flex-grow: 1; }
.card-meta { font-family: var(--font-mono); font-size: 12px; color: var(--secondary); text-transform: uppercase; margin-bottom: 0.75rem; display: block; }
.card-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem; line-height: 1.2; }
.card-text { color: var(--on-surface-variant); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.featured-card { grid-column: span 1; }
.vertical-card { grid-column: span 1; }
.small-card { grid-column: span 1; border: none; background: transparent; }
@media (min-width: 768px) { .featured-card { grid-column: span 8; } .vertical-card { grid-column: span 4; } .small-card { grid-column: span 4; } }

/* Pantry */
.pantry-section { display: grid; grid-template-columns: 1fr; gap: 2rem; border-top: 1px solid var(--outline-variant); padding-top: 4rem; margin-top: 4rem; }
@media (min-width: 768px) { .pantry-section { grid-template-columns: repeat(12, 1fr); } }
.pantry-header { grid-column: span 12; }
@media (min-width: 768px) { .pantry-header { grid-column: span 3; } }
.pantry-title { font-family: var(--font-display); font-size: 3rem; line-height: 0.9; color: var(--primary); margin-bottom: 1.5rem; }
.pantry-list { grid-column: span 12; background: var(--outline-variant); display: flex; flex-direction: column; gap: 1px; }
@media (min-width: 768px) { .pantry-list { grid-column: span 9; } }
.pantry-item { background: var(--background); padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.pantry-item:hover { background: var(--surface-container-low); }
.pantry-item-content { display: flex; gap: 1.5rem; align-items: center; }
.pantry-img { width: 5rem; height: 5rem; background: var(--surface-container); overflow: hidden; flex-shrink: 0; }
.pantry-item-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin-bottom: 0.25rem; }
.pantry-item:hover .pantry-item-title { color: var(--secondary); }

/* Newsletter */
.newsletter-box { margin-top: 4rem; padding: 4rem 1.25rem; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); text-align: center; }
.newsletter-box h2 { font-family: var(--font-display); font-size: 2rem; color: var(--primary); margin-bottom: 1rem; }
.newsletter-form { max-width: 500px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }
.newsletter-input { flex-grow: 1; background: var(--surface-container); border: 1px solid var(--outline-variant); padding: 0.75rem 1rem; color: var(--primary); font-family: inherit; }
.newsletter-btn { background: var(--secondary); color: #000; padding: 0.75rem 1.5rem; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.form-message { margin-top: 1rem; font-size: 14px; min-height: 1.5rem; }
.form-message.success { color: #4ade80; }
.form-message.error { color: #f87171; }