/* V58 — Mobile hero structure for comandos and consolas pages.
   Applies the same visual order seen in the mobile category hero:
   eyebrow -> title -> artwork -> description -> tags -> actions. */

@media (max-width: 800px) {
  .v3-category-hero-grid,
  .v3-detail-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 0 36px;
    min-height: 0;
  }

  .v3-category-hero-grid > div:first-child,
  .v3-detail-grid > div:first-child {
    display: contents;
  }

  .v3-category-hero-grid .section-eyebrow,
  .v3-detail-grid .section-eyebrow { order: 0; }

  .v3-category-hero-grid h1,
  .v3-detail-grid h1 {
    order: 1;
    margin: 22px 0 8px;
  }

  .v3-category-hero-grid .v3-hero-visual,
  .v3-detail-grid .v55-detail-art,
  .v3-detail-grid .v56-controller-art,
  .v3-detail-grid .v3-detail-symbol {
    order: 2;
    align-self: center;
    justify-self: auto;
    width: min(390px, 100%);
    max-width: none;
    margin: -4px auto -10px;
    display: block;
  }

  .v3-category-hero-grid p,
  .v3-detail-grid .v3-detail-lead {
    order: 3;
    margin: 4px 0 14px;
    max-width: 650px;
  }

  .v3-detail-grid .v3-tags {
    order: 4;
    margin: 0 0 12px;
  }

  .v3-category-hero-grid .v3-hero-actions,
  .v3-detail-grid .v3-hero-actions {
    order: 5;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .v3-detail-grid .v55-detail-art,
  .v3-detail-grid .v56-controller-art,
  .v3-detail-grid .v3-detail-symbol,
  .v3-category-hero-grid .v3-hero-visual {
    width: min(360px, 100%);
    margin: -6px auto -12px;
  }

  .v3-detail-grid .v3-detail-symbol {
    display: block;
  }
}

@media (max-width: 480px) {
  .v3-category-hero-grid,
  .v3-detail-grid {
    padding: 18px 0 38px;
  }

  .v3-category-hero-grid h1,
  .v3-detail-grid h1 {
    margin: 18px 0 7px;
  }

  .v3-category-hero-grid .v3-hero-actions,
  .v3-detail-grid .v3-hero-actions {
    margin-top: 12px;
  }
}