/*
Forge Pantry – responsive layout
Build 0009
*/

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

  .hero-copy {
    text-align: center;
    margin-inline: auto;
  }

  .hero p {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    min-height: 260px;
  }

  .action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(calc(100% - 20px), var(--max-width));
    padding-top: 10px;
  }

  .topbar {
    position: relative;
    top: 0;
    grid-template-columns: 1fr auto;
    min-height: 66px;
  }

  .desktop-nav {
    display: none;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .icon-button {
    display: none;
  }

  main {
    padding-top: 14px;
  }

  .hero {
    min-height: auto;
    padding: 34px 22px;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .hero-visual {
    min-height: 225px;
  }

  .plate {
    width: min(230px, 68vw);
  }

  .quick-section {
    padding-top: 24px;
  }

  .section-heading {
    align-items: start;
  }

  .status-pill {
    display: none;
  }

  .page-header {
    align-items: start;
    flex-direction: column;
  }

  .mobile-nav {
    display: grid;
  }

  .toast-region {
    right: 12px;
    bottom: 96px;
    left: 12px;
  }

  .toast {
    margin-inline: auto;
  }
}

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

  .action-card {
    min-height: 100px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .page-header,
  .empty-state {
    padding: 28px 22px;
  }
}

@media (max-width: 370px) {
  .brand strong {
    font-size: 1.05rem;
  }

  .mobile-nav-button small {
    font-size: 0.58rem;
  }
}


@media (max-width: 1040px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .toolbar,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-wide {
    grid-column: auto;
  }

  .recipe-grid {
    grid-template-columns: 1fr;
  }

  .dialog-header {
    align-items: flex-start;
  }

  .dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .danger-ghost-button {
    width: 100%;
  }
}


/* Build 0010: responsive Om-side */
@media (max-width: 900px) { .system-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .about-header { align-items:flex-start; } .about-brand-mark { width:68px; height:68px; border-radius:21px; font-size:2rem; } .about-grid { grid-template-columns:1fr; } .about-card-wide { grid-column:auto; } .about-card { min-height:auto; padding:22px; } }
@media (max-width: 460px) { .about-header { display:block; } .about-brand-mark { margin-top:22px; } .system-grid { grid-template-columns:1fr; } .system-panel .section-heading { display:block; } .compact-button { margin-top:14px; width:100%; } }