/* amo-constanta — page layout: header, hero, homepage sections, static pages */

.amo-hero{
  background: linear-gradient(var(--color-white-warm) 0%, #fdf1dc 55%, #f9d9b4 100%);
  padding: var(--space-13) 0 0;
  position: relative;
  overflow: hidden;
}
.amo-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-6);
  align-items: start;
}
.amo-hero-copy{ padding-top: var(--space-3); }
.amo-hero h1{ color: var(--color-accent); margin: var(--space-6) 0 0; }
.amo-hero-lede{
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 38ch;
  margin: var(--space-5) 0 0;
  line-height: 1.4;
}
.amo-hero-actions{ display: flex; gap: var(--space-3); margin: var(--space-7) 0 var(--space-8); flex-wrap: wrap; }
.amo-hero-partners{ display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-8); flex-wrap: wrap; }
.amo-hero-partners-label{ font-size: var(--text-sm); color: var(--color-ink-faint); }
.amo-partner-badge{
  width: 74px; height: 74px; border-radius: 50%;
  color: var(--color-white-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); text-align: center; line-height: 1.1;
}
.amo-partner-badge--bolt{ background: #4aa96c; }
.amo-partner-badge--wolt{ background: #3ec1e0; }
.amo-partner-badge--glovo{ background: #f5cd3f; color: var(--color-ink); }
.amo-hero-image{ position: relative; margin: 0 calc(var(--container-pad) * -1) calc(var(--container-pad) * -1) 0; }
.amo-hero-image img{ width: 104%; display: block; filter: drop-shadow(0 18px 30px rgba(74,50,39,.18)); }

@media (max-width: 1023px){
  .amo-hero-grid{ grid-template-columns: 1fr; }
  .amo-hero h1{ font-size: var(--text-3xl); }
  .amo-hero-image{ margin: var(--space-7) 0 0; }
  .amo-hero-image img{ width: 100%; }
}
@media (max-width: 767px){
  .amo-hero{ padding-top: var(--space-9); }
  .amo-hero h1{ font-size: var(--text-2xl); }
}

.amo-section-head{ margin-bottom: var(--space-6); }
.amo-section-head h2{ font-size: var(--text-4xl); margin: 0; }
.amo-section-head-row{
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  border-bottom: 2px solid var(--color-border-strong);
  padding-bottom: var(--space-5);
  flex-wrap: wrap;
}
.amo-section-head-row h2{ font-size: var(--text-5xl); line-height: .95; }
.amo-size-toggle{ display: flex; align-items: center; gap: var(--space-3); }
.amo-size-toggle-label{ font-size: var(--text-sm); color: var(--color-ink-softer); }
@media (max-width: 767px){
  .amo-section-head h2, .amo-section-head-row h2{ font-size: var(--text-3xl); }
}

/*
 * Bug fix (2026-09-16, owner report: prices/+ button not aligned across
 * cards — a longer description pushes them further down on that card only).
 * .amo-grid-4 (components.css) is a CSS Grid, so the 4 .amo-top4-card boxes
 * in a row are already equal-HEIGHT (grid's default align-items: stretch) —
 * but each one's own price row just followed normal flow after a
 * variable-length description, so *within* that shared height it still
 * landed at a different vertical position card to card. The min-height
 * below was an earlier, incomplete attempt at this (a floor, not a fix — a
 * 2-line description still pushes past it). Making the card a column flex
 * box and pinning .amo-top4-price-row to the bottom with margin-top: auto
 * guarantees the price + button sit on the same baseline regardless of
 * description length.
 */
.amo-top4-card{ display: flex; flex-direction: column; }
.amo-top4-card h3{ margin: 0; font-size: var(--text-xl); }
.amo-top4-card p{ margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-ink-softer); min-height: 40px; }
.amo-top4-card .amo-top4-head{ display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); }
.amo-top4-card .amo-top4-price-row{ display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.amo-top4-card .amo-price{ font-size: var(--text-xl); color: var(--color-accent); }

.amo-category-filters{ display: flex; margin: var(--space-6) 0 var(--space-6); gap: var(--space-2); flex-wrap: wrap; }

/*
 * Homepage menu categories (2026-09-18) — plain stacked <div>s inside the
 * single shared .amo-container (see front-page.php's own comment on this
 * fix), not separate sections/containers, so there's no background/
 * padding break between them — just vertical rhythm. Each category's own
 * .amo-section-head-row already draws a border-bottom under its heading
 * (existing rule, above); that's the only rule line anywhere in here —
 * deliberately not adding a second one between categories, since the
 * point was to read as one continuous list, not a series of divided
 * blocks with a different kind of divider.
 */
.amo-menu-category{ margin-top: var(--space-12); }
.amo-menu-category:first-of-type{ margin-top: var(--space-9); }

.amo-menu-columns{ display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-14); }
@media (max-width: 1023px){ .amo-menu-columns{ grid-template-columns: 1fr; column-gap: 0; } }

.amo-process-grid{
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-7);
  border-top: 2px solid var(--color-border-strong); padding-top: var(--space-7);
}
.amo-process-step-num{ font-size: var(--text-3xl); color: #f0a07f; line-height: 1; font-family: var(--font-heading); }
.amo-process-grid h3{ margin: var(--space-2) 0 var(--space-2); font-size: var(--text-xl); }
/*
 * Bug fix (2026-09-18, owner report: "aluat photo doesn't line up with
 * cuptorul/masa"). Root cause was NOT the photo or its CSS box
 * (.amo-process-photo is already a fixed 170px/object-fit:cover box,
 * identical for all three) — it's that each photo's position is just
 * `margin-top` after its own column's <p>, and the three captions wrap to
 * different numbers of lines ("Făină italiană, drojdie sălbatică, 48 de
 * ore de răbdare. Nimic mai mult." wraps to 2 lines; the other two fit on
 * 1). That extra line pushed only the Aluatul photo down, breaking the
 * shared top edge. Same fix already used for the exact same shape of bug
 * on .amo-top4-card p (layout.css, above) — reserve 2 lines' worth of
 * height regardless of actual line count, so all three photos start at
 * an identical, caption-length-independent Y position. min-height value
 * matches .amo-top4-card p's (same 14px/--text-sm, same ~1.5 line-height).
 */
.amo-process-grid p{ margin: 0; font-size: var(--text-sm); color: var(--color-ink-softer); min-height: 40px; }
.amo-process-photo{ margin-top: var(--space-5); height: 170px; }
.amo-process-photo--img{ overflow: hidden; }
.amo-process-photo--img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px){ .amo-process-grid{ grid-template-columns: 1fr; } }

.amo-location-card h3{ margin: 0 0 var(--space-1); font-size: var(--text-xl); color: var(--color-accent); }
.amo-location-card p{ margin: 0; font-size: var(--text-base); }
.amo-location-card .amo-location-hours{ margin: var(--space-1) 0 var(--space-5); font-size: var(--text-base); color: var(--color-ink-softer); }
.amo-location-photo{ height: 190px; }
.amo-location-body{ padding: var(--space-6); }

.amo-reviews-grid{ padding: var(--space-9) 0; }
.amo-review-stat{ font-size: var(--text-3xl); color: var(--color-accent); line-height: 1; font-family: var(--font-heading); }
.amo-review-quote{ font-size: var(--text-md); margin: var(--space-3) 0 var(--space-2); }
.amo-review-source{ font-size: var(--text-sm); color: var(--color-ink-faint); }

/* ---- generic content page (Poveste / Contact) ---- */
.amo-page-hero{
  background: linear-gradient(var(--color-white-warm) 0%, #fdf1dc 55%, #f9d9b4 100%);
  padding: var(--space-11) 0;
}
.amo-page-hero h1{ font-size: var(--text-4xl); color: var(--color-accent); margin: 0 0 var(--space-3); }
.amo-page-hero p{ font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 60ch; margin: 0; }

.amo-content{ padding: var(--space-9) 0; max-width: 78ch; }
.amo-content h2{ font-size: var(--text-2xl); margin-top: var(--space-9); }
.amo-content h2:first-child{ margin-top: 0; }
.amo-content p{ font-size: var(--text-base); color: var(--color-ink-soft); }
.amo-content ul{ padding-left: var(--space-6); color: var(--color-ink-soft); }

.amo-contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); padding: var(--space-9) 0; }
@media (max-width: 1023px){ .amo-contact-grid{ grid-template-columns: 1fr; } }
.amo-contact-block{ margin-bottom: var(--space-7); }
.amo-contact-block h3{ font-size: var(--text-lg); margin-bottom: var(--space-2); }
.amo-contact-block p{ margin: 0; color: var(--color-ink-soft); }