/*
 * MetalicArt — hero-ul paginilor de categorie.
 *
 * Singura sursă de stil pentru secțiunea asta. Înainte regulile ei erau împrăștiate în
 * nouăsprezece locuri din `style.css`, cu trei înălțimi minime care se contraziceau: 
 * `clamp(520px, 70vh, 720px)`, apoi `676px !important`, apoi `620px !important` într-un media
 * query. Rezultatul se măsura: la 768 px cadrul ieșea aproape pătrat (raport 1,02), iar la 390 px
 * de-a dreptul vertical (0,52) — o fotografie orizontală strivită într-o fâșie îngustă.
 *
 * Acum forma se dă din raport, nu din înălțime fixă, iar pe telefon secțiunea crește după text.
 *
 * Fotografia nu apare niciodată aici. Vine din atributul `mediaId` al blocului, randată de PHP cu
 * `srcset` și `sizes`, ca să poată fi schimbată din admin fără să se atingă nimeni de CSS.
 */

.wp-block-metalicart-hero.metalicart-category-hero {
  --ma-paper: #f4ede0;
  --ma-bronze: var(--metalicart-text-accent, #e1b270);

  position: relative;
  /* Raportul ține locul înălțimii fixe. 16:9 este forma cerută pe desktop și, cu fotografia la
     3:2, taie puțin pe verticală — destul cât cadrul să rămână recognoscibil. */
  /*
   * Forma se cere ca înălțime minimă, nu ca raport impus.
   *
   * `aspect-ratio` fixa înălțimea la lățimea împărțită la raport, iar ce nu încăpea ieșea pe
   * dedesubt: banda dovezilor, crescută cu iconițele aprobate, trecea cu douăzeci și nouă de
   * pixeli sub marginea secțiunii și ajungea sub introducerea de dedesubt. Nici `min-height:
   * max-content`, nici `fit-content` nu urnesc o cutie căreia raportul i-a dat deja o înălțime.
   *
   * Aceeași formă, cerută ca minim: 56,25vw este chiar 9/16 din lățime. Cât timp textul încape,
   * cadrul arată exact ca înainte; când nu mai încape, crește după el. Singura abatere este
   * lățimea barei de derulare, pe care `vw` o numără și secțiunea nu o are: opt pixeli la 1440,
   * sub un procent din înălțime.
   */
  min-height: 56.25vw;
  padding-top: 0;
}

/* Coloana și paddingurile vin din variabilele comune: hero-ul de aici este reperul, nu excepția. */
.wp-block-metalicart-hero.metalicart-category-hero .metalicart-hero-inner {
  min-height: 0;
  max-width: var(--wp--custom--ma-hero-col);
  padding: var(--wp--custom--ma-hero-pad-top) 0 var(--wp--custom--ma-hero-pad-bottom);
}

.wp-block-metalicart-hero.metalicart-category-hero .metalicart-hero-copy { max-width: 650px; }
.wp-block-metalicart-hero.metalicart-category-hero .metalicart-hero-lead { max-width: 570px; }
.wp-block-metalicart-hero.metalicart-category-hero .metalicart-breadcrumb { margin-bottom: 2.7rem; }

.wp-block-metalicart-hero.metalicart-category-hero h1 {
  max-width: var(--wp--custom--ma-hero-title-max);
  margin-block: var(--wp--custom--ma-hero-title-mb);
  font-size: var(--wp--custom--ma-hero-title);
  line-height: var(--wp--custom--ma-hero-title-lh);
}

.wp-block-metalicart-hero.metalicart-category-hero p:not(.metalicart-eyebrow, .metalicart-breadcrumb) {
  max-width: var(--wp--custom--ma-hero-lead-max);
  font-size: var(--wp--custom--ma-hero-lead);
}

/*
 * Umbrirea, mai densă în stânga, sub text.
 *
 * Blocul își desenează stratul propriu, `.ma-editorial-overlay`, cu opacitatea din atributele lui;
 * aici se dă doar culoarea. Este suficient de deschis în dreapta cât fotografia să rămână citibilă.
 */
.wp-block-metalicart-hero.metalicart-category-hero > .ma-editorial-overlay {
  background: linear-gradient(90deg, rgb(6 7 7) 0%, rgb(6 7 7 / .88) 46%, rgb(6 7 7 / .58) 100%);
}

.wp-block-metalicart-hero.metalicart-category-hero .wp-block-cover__inner-container { z-index: 2; }
.wp-block-metalicart-hero.metalicart-category-hero .alignwide { max-width: 1240px; margin-inline: auto; }

/* ------------------------------------------------------------------------------ Tabletă */

@media (max-width: 1024px) {
  /* Cadrul se înalță puțin, ca titlul să aibă loc, dar rămâne orizontal. 68,75vw este 11/16. */
  .wp-block-metalicart-hero.metalicart-category-hero { min-height: 68.75vw; }
  .wp-block-metalicart-hero.metalicart-category-hero .metalicart-breadcrumb { margin-bottom: 2rem; }
}

/* -------------------------------------------------------------------------------- Mobil */

@media (max-width: 782px) {
  /*
   * Fără raport impus și fără înălțime minimă: secțiunea crește după text. Un raport fix ar fi
   * însemnat ori un cadru vertical care taie fotografia într-o fâșie, ori unul orizontal în care
   * titlul nu încape.
   */
  .wp-block-metalicart-hero.metalicart-category-hero {
    min-height: 0;
  }
  /*
   * Marginea de jos este generoasă pentru că ea este singurul loc unde fotografia se mai vede pe
   * telefon: textul ocupă toată lățimea, deci imaginea rămâne o bandă sub buton. Fără ea, hero-ul
   * arăta ca un dreptunghi negru cu text.
   */
  .wp-block-metalicart-hero.metalicart-category-hero .metalicart-breadcrumb { margin-bottom: 1.25rem; }
  /*
   * Pe verticală umbrirea este densă sus, unde stă textul, și se ridică spre bandă. Valorile sunt
   * calibrate pe pixeli: textul rămâne peste 4,5:1, iar banda de jos rămâne destul de deschisă cât
   * categoria să se recunoască dintr-o privire.
   */
  .wp-block-metalicart-hero.metalicart-category-hero > .ma-editorial-overlay {
    background: linear-gradient(180deg, rgb(6 7 7 / .95) 0%, rgb(6 7 7 / .88) 46%, rgb(6 7 7 / .42) 82%, rgb(6 7 7 / .3) 100%);
  }
}

/*
 * Supratitlul își ține locul pentru două rânduri sub 481 px.
 *
 * Până se încarcă fontul site-ului, textul se vede cu cel de rezervă, iar cele două nu au aceeași
 * lățime: „LUCRĂRI LA COMANDĂ · BUCUREȘTI” are 251 px cu unul și 307 cu celălalt. Sub 431 px
 * coloana este mai îngustă decât cel de rezervă plus linia din fața lui, deci rândul se rupe cu un
 * font și încape cu celălalt, iar în clipa schimbului titlul și tot ce urmează sar cu un rând — 20
 * px, măsurați pe toate cele opt pagini de categorie, la 360 și la 390. Rezervându-i locul,
 * schimbul nu mai mută nimic. Pragul este pus la 480, nu la 400 unde s-a măsurat ruptura: fontul de
 * rezervă diferă de la un sistem la altul, iar un rând rezervat degeaba costă 20 px de aer, pe când
 * unul lipsă costă chiar saltul care se repară aici.
 */
@media (max-width: 480px) {
  .wp-block-metalicart-hero.metalicart-category-hero .metalicart-eyebrow {
    /*
     * Două rânduri, exprimate în chiar interlinia elementului. `lh` este unitatea potrivită; linia
     * dinaintea ei rămâne pentru browserele care încă nu o cunosc, cu multiplicatorul scris la fel
     * ca interlinia de aici (19,8 px la 12 px, adică 1,65).
     */
    min-height: calc(2 * 1.65em);
    min-height: 2lh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-metalicart-hero.metalicart-category-hero *,
  .wp-block-metalicart-hero.metalicart-category-hero *::before,
  .wp-block-metalicart-hero.metalicart-category-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}