/*
Theme Name: MetalicArt
Theme URI: https://www.metalicart.ro/
Author: MetalicArt
Description: Temă block nativă pentru atelierul MetalicArt.
Version: 0.24.0
Requires at least: 7.1
Requires PHP: 8.1
Text Domain: metalicart
*/

/*
 * Semnul WhatsApp de marcă, oriunde apare.
 *
 * Este o imagine livrată gata lucrată — bronz peste fier —, nu un contur colorat din `currentColor`,
 * deci nu se filtrează, nu se recolorează și nu se taie: se așază în cutia ei cu `contain`. Mărimea
 * vine din atributele `width` și `height` scrise în marcaj, ca pagina să nu sară cât se încarcă;
 * locurile care au nevoie de altă măsură o cer ele.
 *
 * Nu prinde clicuri: apăsarea trebuie să cadă pe butonul din jurul lui, nu pe imagine.
 */
.ma-whatsapp-premium-icon,
.ma-ui-icon {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
}

:root { --metalicart-line: color-mix(in srgb, var(--wp--preset--color--bronze) 32%, transparent); --metalicart-shadow: 0 24px 70px rgb(0 0 0 / .22); }
html { scroll-behavior: smooth; }
/*
 * Cât ține meniul, pagina nu se derulează și nici nu se lasă trasă elastic — altfel mișcarea dusă
 * mai departe de la capătul meniului o clatină, iar de sub meniul fix se ivește o fâșie din site.
 */
html.ma-nav-deschis { overflow: hidden; overscroll-behavior: none; }
html.ma-nav-deschis body { overscroll-behavior: none; }
body { overflow-x: hidden; text-rendering: optimizeLegibility; }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ''; background: radial-gradient(circle at 82% 4%, rgb(184 111 61 / .07), transparent 28rem); }
body, button, input, textarea, select { font-size: max(1rem, 1rem); }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--wp--preset--color--ember); outline-offset: 3px; }
a { text-underline-offset: .18em; }
.metalicart-eyebrow { color: var(--wp--preset--color--copper); font-size: var(--ma-fs-xs, .75rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.metalicart-eyebrow::before { content: ''; display: inline-block; width: 2.25rem; border-top: 1px solid currentColor; margin: 0 .75rem .25em 0; }
.metalicart-section-title { max-width: 760px; font-size: var(--wp--custom--ma-title); line-height: var(--wp--custom--ma-title-lh); }
.metalicart-card { border: 1px solid var(--metalicart-line); transition: transform .2s ease, border-color .2s ease; }
.metalicart-card:hover { border-color: var(--wp--preset--color--copper); transform: translateY(-3px); }
.metalicart-hero { min-height: clamp(650px, 82vh, 850px); }
.metalicart-hero .wp-block-cover__image-background { object-position: center 42%; }
.metalicart-hero::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgb(8 9 9 / .9) 0%, rgb(8 9 9 / .58) 48%, rgb(8 9 9 / .2) 100%); }
.metalicart-hero .wp-block-cover__inner-container { z-index: 2; }
.metalicart-hero-copy { max-width: 780px; margin-left: 0 !important; }
.metalicart-hero h1 { max-width: 780px; margin-block: .55rem 1.2rem; font-size: clamp(3.2rem, 7vw, 7rem); }
.metalicart-hero h1 em, .metalicart-accent { color: var(--wp--preset--color--copper); font-weight: 400; }
.metalicart-hero .wp-block-buttons { margin-top: 2rem; }
.metalicart-hero .wp-block-button__link, .metalicart-precontact-cta .wp-block-button__link { min-width: 180px; font-size: var(--ma-fs-sm, .68rem); letter-spacing: .1em; text-align: center; text-transform: uppercase; box-shadow: 0 10px 35px rgb(0 0 0 / .2); }
.metalicart-cream-section { color: var(--wp--preset--color--iron); background: var(--wp--preset--color--cream); }
.metalicart-section { padding: var(--wp--custom--ma-rhythm-y) clamp(1rem, 4vw, 3rem); }
.metalicart-intro-grid { align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.metalicart-category-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

.metalicart-category-tile strong { font: 500 clamp(1.35rem, 2.5vw, 2rem)/1.1 var(--wp--preset--font-family--display); }
.metalicart-category-tile span { margin-top: .8rem; color: var(--wp--preset--color--copper); font-size: var(--ma-fs-xs, .7rem); letter-spacing: .15em; text-transform: uppercase; }
.metalicart-portfolio-section { background: #11130f; }
.metalicart-contact-section { background: radial-gradient(circle at 15% 50%, #302117 0, #11130f 45%); }
.metalicart-precontact-cta { position: relative; overflow: hidden; border-block: 1px solid var(--metalicart-line); background: radial-gradient(circle at 85% 50%, #3a2114 0, #121410 38%, #0b0c0b 72%) !important; }
.metalicart-precontact-cta::after { position: absolute; right: -8rem; bottom: -12rem; width: 32rem; height: 32rem; border: 1px solid rgb(184 111 61 / .18); border-radius: 50%; content: ''; box-shadow: 0 0 0 4rem rgb(184 111 61 / .025), 0 0 0 8rem rgb(184 111 61 / .018); }
.metalicart-precontact-cta > * { position: relative; z-index: 1; }
.metalicart-demo-form { padding: clamp(1.5rem, 4vw, 3rem); color: var(--wp--preset--color--iron); background: var(--wp--preset--color--cream); box-shadow: var(--metalicart-shadow); }
.metalicart-demo-form label { display: grid; gap: .4rem; margin-bottom: 1rem; font-weight: 650; }
.metalicart-demo-form input, .metalicart-demo-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #b9ad9b; background: #fffdf8; padding: .8rem; font: inherit; }
.metalicart-demo-form button[disabled] { opacity: 1; cursor: not-allowed; }
.metalicart-category-catalog { background: #10120f; }
.metalicart-category-catalog > .alignwide { max-width: 1320px; }
.metalicart-category-catalog .metalicart-section-title { margin-bottom: .4rem; }
.metalicart-category-final-cta { border-top: 1px solid var(--metalicart-line); background: radial-gradient(circle at 78% 45%, #362116, #10120f 45%) !important; }
.metalicart-category-final-cta > .alignwide { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.metalicart-category-final-cta h2 { max-width: 760px; margin: 0; font-size: clamp(2rem, 4vw, 4rem); }
.metalicart-style-grid .wp-block-column { border: 1px solid color-mix(in srgb, var(--wp--preset--color--bronze) 28%, transparent); padding: 2rem; }
.metalicart-site-footer { border-top: 1px solid var(--metalicart-line); padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem) 1.5rem; }
.metalicart-site-footer h3 { color: var(--wp--preset--color--copper); font-size: 1rem; }
.metalicart-site-footer ul { padding: 0; list-style: none; }
.metalicart-site-footer li { margin: .55rem 0; }
.metalicart-site-footer a { color: var(--wp--preset--color--cream); text-decoration: none; }
.metalicart-footer-base { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--metalicart-line); opacity: .7; }
.metalicart-contact { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; }
.metalicart-contact dt { color: var(--wp--preset--color--copper); }
.metalicart-contact dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .metalicart-category-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 782px) {
 .metalicart-hero { min-height: 640px; } .metalicart-hero::after { background: linear-gradient(0deg, rgb(8 9 9 / .94), rgb(8 9 9 / .35)); } .metalicart-category-links { grid-template-columns: 1fr; }  .metalicart-category-final-cta > .alignwide { align-items: flex-start; flex-direction: column; } .metalicart-footer-base { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .metalicart-section { padding-block: 3.75rem; } .metalicart-hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); } .metalicart-hero .wp-block-buttons, .metalicart-hero .wp-block-button { width: 100%; } .metalicart-hero .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Homepage 0.5 — compoziție editorială inspirată de mock-up. */
.home .metalicart-hero{min-height:780px}.home .metalicart-hero .wp-block-cover__image-background{object-position:center 52%}.home .metalicart-hero::after{background:linear-gradient(90deg,rgb(7 8 8/.94) 0%,rgb(7 8 8/.67) 43%,rgb(7 8 8/.14) 76%)}
.metalicart-hero-inner{position:relative;display:flex;align-items:center;min-height:780px;max-width:1280px!important;margin:auto!important;padding:80px 0}.metalicart-hero-copy{max-width:860px;margin:0!important}.metalicart-hero-lead{max-width:650px;color:rgb(244 237 224/.82);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.75}.metalicart-hero-signature{position:absolute;right:0;bottom:54px;display:grid;gap:.25rem;width:245px;padding:1.2rem 1.4rem;border-left:2px solid var(--wp--preset--color--copper);background:rgb(12 13 12/.76);backdrop-filter:blur(10px)}.metalicart-hero-signature span{color:var(--wp--preset--color--copper);font-size:var(--ma-fs-xs, .62rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase}.metalicart-hero-signature strong{font-family:var(--wp--preset--font-family--display);font-size:1.15rem}.metalicart-hero-signature small{color:rgb(244 237 224/.65)}
.metalicart-home-categories .metalicart-intro-grid{max-width:1280px;align-items:end}.metalicart-home-categories>.metalicart-categories{max-width:1280px;margin-inline:auto}
.metalicart-portfolio-heading{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:3rem;align-items:end;margin-bottom:3.5rem}.metalicart-portfolio-heading>p{color:rgb(244 237 224/.68)}.home .metalicart-portfolio-section .metalicart-catalog{grid-template-columns:1.15fr .85fr .85fr;grid-auto-rows:285px}.home .metalicart-portfolio-section .metalicart-work-card{min-height:0}.home .metalicart-portfolio-section .metalicart-work-card:first-child{grid-row:span 2}.home .metalicart-portfolio-section .metalicart-work-image{height:100%;aspect-ratio:auto}.home .metalicart-portfolio-section .metalicart-work-card__body{position:absolute;right:0;bottom:0;left:0;margin:0;background:linear-gradient(180deg,transparent,rgb(8 9 8/.94))}.metalicart-portfolio-more{margin-top:2.5rem;text-align:right}.metalicart-portfolio-more a{color:var(--wp--preset--color--copper);font-size:var(--ma-fs-sm, .72rem);font-weight:700;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}

.metalicart-quote-grid{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(420px,1fr);gap:clamp(3rem,8vw,8rem);max-width:1180px}.home .metalicart-contact-section{padding-block:clamp(5rem,10vw,10rem)}
@media(max-width:1100px){.metalicart-hero-inner{padding-inline:2rem}.home .metalicart-portfolio-section .metalicart-catalog{grid-template-columns:1fr 1fr}.home .metalicart-portfolio-section .metalicart-work-card:first-child{grid-row:span 1}.metalicart-home-categories }
@media(max-width:782px){.metalicart-hero-inner{display:block;min-height:680px;padding:120px 1.2rem 3rem}.home .metalicart-hero{min-height:680px}.metalicart-hero-signature{right:1.2rem;bottom:2rem;width:auto}.metalicart-portfolio-heading,.metalicart-quote-grid{grid-template-columns:1fr}.home .metalicart-portfolio-section .metalicart-catalog{grid-template-columns:1fr 1fr;grid-auto-rows:330px}}
@media(max-width:480px){.metalicart-hero-signature{display:none}.home .metalicart-portfolio-section .metalicart-catalog{grid-template-columns:1fr}.home .metalicart-portfolio-section .metalicart-catalog{grid-auto-rows:420px}.metalicart-category-tile__content p{min-height:auto}}

:root{--metalicart-text-accent:#e1b270}.metalicart-eyebrow,.metalicart-hero h1 em,.metalicart-accent,.metalicart-hero-signature span,.metalicart-portfolio-more a,.metalicart-site-footer h3,.metalicart-contact dt{color:var(--metalicart-text-accent)}

.metalicart-hero .wp-block-buttons{align-items:center;gap:1.35rem}.metalicart-hero .wp-block-button__link{min-width:0;border:1px solid var(--wp--preset--color--copper);border-radius:0;padding:.82rem 1.15rem;color:var(--wp--preset--color--iron);background:var(--wp--preset--color--copper);box-shadow:none;font-size:var(--ma-fs-sm, .66rem);font-weight:800;line-height:1.2;letter-spacing:.09em;text-transform:uppercase}.metalicart-hero .wp-block-button__link:hover{border-color:#d18a58;background:#d18a58}.metalicart-hero .wp-block-button__link span{margin-left:.55rem}.metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link{border:0!important;padding:.82rem 0!important;color:var(--wp--preset--color--cream)!important;background:transparent!important;box-shadow:none!important}.metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link::after{margin-left:.65rem;color:var(--metalicart-text-accent);content:'→';font-size:var(--ma-fs-md, .9rem)}.metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--metalicart-text-accent)!important}
@media(max-width:480px){.metalicart-hero .wp-block-button.is-style-outline{width:auto}.metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link{width:auto}}/* Calibrare hero după reperul desktop de 1348 px. */.home .metalicart-hero-inner{width:calc(100% - 3rem);max-width:1160px!important;box-sizing:border-box;padding:72px 0 82px}.home .metalicart-hero-copy{width:min(100%,640px);max-width:640px;margin:0!important;text-align:left}.home .metalicart-hero .metalicart-eyebrow{margin:0 0 1.35rem;color:var(--metalicart-text-accent);font-size:var(--ma-fs-xs, .64rem);line-height:1.25;letter-spacing:.15em}.home .metalicart-hero h1{max-width:640px;margin:0 0 1.35rem;font-family:var(--wp--preset--font-family--display);font-size:clamp(3.35rem,4.55vw,4.15rem);font-weight:500;line-height:.96;letter-spacing:-.035em;text-align:left;text-wrap:balance}.home .metalicart-hero h1 em{display:inline;font-weight:500;line-height:inherit}.home .metalicart-hero-lead{max-width:545px;margin:0;color:rgb(244 237 224/.76);font-size:var(--ma-fs-base, .9rem);line-height:1.65;text-align:left}.home .metalicart-hero .wp-block-buttons{justify-content:flex-start;margin-top:1.7rem}.home .metalicart-hero .wp-block-button__link{padding:.72rem 1rem;font-size:var(--ma-fs-sm, .61rem);letter-spacing:.08em}.home .metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link{padding-block:.72rem!important}.home .metalicart-hero-signature{right:0;bottom:48px}
@media(max-width:782px){.home .metalicart-hero-inner{width:100%;padding:112px 1.25rem 3rem}.home .metalicart-hero-copy{max-width:590px}.home .metalicart-hero h1{font-size:clamp(3rem,9vw,4rem);line-height:.98}.home .metalicart-hero-signature{right:1.25rem}}
@media(max-width:480px){.home .metalicart-hero h1{font-size:clamp(2.7rem,13vw,3.45rem);line-height:.98}.home .metalicart-hero .wp-block-buttons{align-items:flex-start;gap:.75rem}.home .metalicart-hero .wp-block-button{width:auto}.home .metalicart-hero .wp-block-button__link{width:auto}}/* Calibrare vizuală verificată cu Chromium la lățimea mock-up-ului (1348 px). */
.home .metalicart-hero{min-height:700px}
.home .metalicart-hero .wp-block-cover__image-background{object-position:center 50%}
.home .metalicart-hero-inner{display:block;min-height:700px;padding:86px 0 54px}
.home .metalicart-hero-copy{width:min(100%,540px);max-width:540px}
.home .metalicart-hero .metalicart-eyebrow{margin:0 0 1.2rem;font-size:var(--ma-fs-xs, .62rem);letter-spacing:.145em}
.home .metalicart-hero h1{max-width:540px;margin:0 0 1.2rem;font-size:clamp(3.2rem,4.2vw,3.65rem);font-weight:500;line-height:.97;letter-spacing:-.038em;text-wrap:initial}
.home .metalicart-hero h1 em{display:inline;font-weight:500}
.home .metalicart-hero-lead{max-width:505px;font-size:var(--ma-fs-base, .82rem);line-height:1.6}
.home .metalicart-hero .wp-block-buttons{gap:1.35rem;margin-top:1.35rem}
.home .metalicart-hero .wp-block-button__link{padding:.7rem 1rem;font-size:var(--ma-fs-sm, .6rem)}
.home .metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link{padding-block:.7rem!important}
.home .metalicart-hero-signature{right:0;bottom:38px;width:220px;padding:1rem 1.2rem}
.home .metalicart-hero-signature p{margin:0;color:rgb(244 237 224/.64);font-size:var(--ma-fs-xs, .68rem)}
.home .metalicart-hero-signature p:first-child{color:var(--metalicart-text-accent);font-size:var(--ma-fs-xs, .6rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.home .metalicart-hero-signature h3{margin:.16rem 0;color:var(--wp--preset--color--cream);font-size:1.05rem}
@media(max-width:782px){.home .metalicart-hero-inner{min-height:660px;padding:92px 1.25rem 3rem}.home .metalicart-hero{min-height:660px}.home .metalicart-hero h1{font-size:clamp(3rem,9vw,3.8rem)}}
@media(max-width:480px){.home .metalicart-hero-inner{min-height:620px;padding-top:76px}.home .metalicart-hero{min-height:620px}.home .metalicart-hero h1{font-size:clamp(2.65rem,12.5vw,3.25rem)}}/* Suprapunerea, scara și ritmul vertical ale reperului aprobat. */
.home .metalicart-hero{height:713px;min-height:713px!important;box-sizing:border-box;padding:0!important}
.home .metalicart-hero .wp-block-cover__image-background{object-position:center center}
.home .metalicart-hero-inner{min-height:713px;padding:181px 0 52px}
.home .metalicart-hero-copy{width:min(100%,680px);max-width:680px}
.home .metalicart-hero .metalicart-eyebrow{margin-bottom:1.55rem}
.home .metalicart-hero h1{max-width:700px;margin-bottom:.5rem;font-size:5.65rem;line-height:1.035;letter-spacing:-.05em}
.home .metalicart-hero-lead{max-width:650px;margin-left:0!important;font-size:var(--ma-fs-base, .96rem);line-height:1.7}
.home .metalicart-hero .wp-block-buttons{gap:.75rem;margin-top:2.65rem}
.home .metalicart-hero .wp-block-button__link{min-height:50px;box-sizing:border-box;padding:1rem 1.7rem;font-size:var(--ma-fs-sm, .63rem)}
.home .metalicart-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link{border-color:#c96b2c;background:#c96b2c}
.home .metalicart-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{border-color:#dc7a36;background:#dc7a36}
.home .metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link{min-height:50px;border:1px solid rgb(244 237 224/.44)!important;padding:1rem 1.7rem!important}
.home .metalicart-hero .wp-block-button.is-style-outline .wp-block-button__link::after{display:none}
.home .metalicart-hero-signature{right:-17px;bottom:75px;grid-template-columns:2rem 1fr;grid-template-rows:auto auto;width:240px;box-sizing:border-box;padding:1.15rem 1rem}
/* Semnul focului este acum imaginea livrată, scrisă în marcaj; caracterul `♨` a ieșit. */
.home .metalicart-hero-signature__semn{grid-row:1/3;align-self:center}
.home .metalicart-hero-signature p{grid-column:2;margin:0;color:rgb(244 237 224/.55);font-size:var(--ma-fs-xs, .57rem);letter-spacing:.1em;text-transform:uppercase}
.home .metalicart-hero-signature h3{grid-column:2;margin:0;color:var(--wp--preset--color--cream);font-size:1rem}
.home .metalicart-portfolio-section .metalicart-catalog{grid-template-columns:1.15fr .85fr;grid-auto-rows:340px}
.home .metalicart-portfolio-section .metalicart-work-card:first-child{grid-row:span 2}
@media(max-width:782px){.home .metalicart-hero{height:auto;min-height:660px!important}.home .metalicart-hero-inner{min-height:660px;padding:104px 1.25rem 3rem}.home .metalicart-hero h1{font-size:clamp(3rem,9vw,3.8rem);line-height:1.02}.home .metalicart-hero-signature{right:1.25rem;bottom:2rem}}
/* Calibrarea veche a hero-ului de pe prima pagină sub 480 px a rămas fără obiect: mărimile,
   înălțimea și paddingul vin acum din variabilele comune. `white-space: nowrap` de pe supratitlu
   îl ținea pe un rând cu litera de 8,3 px; cu litera comună de 12 px, textul ieșea din ecran cu
   44 px la 390 și 114 la 320, fără să apară în lățimea de derulare, fiindcă pagina taie ce iese. */

/* Blocuri editoriale MetalicArt — structură protejată, conținut editabil inline. */
.wp-block-metalicart-hero{position:relative;overflow:hidden;isolation:isolate}
.wp-block-metalicart-hero::after{display:none}
/* Core's wp-block-cover stylesheet loads after the theme and pins the background image to
   z-index:0 at equal specificity, so the overlay has to sit above it explicitly. */
.wp-block-metalicart-hero>.wp-block-cover__image-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.wp-block-metalicart-hero>.ma-editorial-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(7 8 8) 0%,rgb(7 8 8/.94) 46%,rgb(7 8 8/.82) 100%)}
.wp-block-metalicart-hero>.wp-block-cover__inner-container{position:relative;z-index:2}
.wp-block-metalicart-section-heading.is-center{text-align:center}.wp-block-metalicart-section-heading.is-center>*{margin-inline:auto}
.wp-block-metalicart-editorial-media{display:grid;grid-template-columns:1fr 1fr;min-height:680px;color:var(--wp--preset--color--cream);background:#11130f}
.wp-block-metalicart-editorial-media.is-media-right .ma-editorial-media__visual{order:2}
.ma-editorial-media__visual{position:relative;min-height:680px;margin:0;overflow:hidden}
.ma-editorial-media__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ma-editorial-media__copy{align-self:center;max-width:680px;padding:clamp(2.5rem,6vw,6rem)}
.metalicart-cta-section{padding:clamp(4rem,8vw,8rem) max(1rem,calc((100vw - 1160px)/2));color:var(--wp--preset--color--cream);background:radial-gradient(circle at 80% 50%,#3a2114,#11130f 45%)}
.metalicart-cta-section.is-cream{color:var(--wp--preset--color--iron);background:var(--wp--preset--color--cream)}
@media(max-width:1100px){
.wp-block-metalicart-editorial-media{grid-template-columns:1fr}.wp-block-metalicart-editorial-media.is-media-right .ma-editorial-media__visual{order:0}.ma-editorial-media__visual{min-height:460px}}
/* Pe telefon supratitlul cade în partea de sus a fotografiei, unde vălul era cel mai subțire:
   contrastul ieșea 4,31, sub pragul de 4,5 cerut unui text mic. Capătul de sus se îngroașă. */
@media(max-width:480px){.wp-block-metalicart-hero>.ma-editorial-overlay{background:linear-gradient(0deg,rgb(7 8 8) 0%,rgb(7 8 8/.94) 55%,rgb(7 8 8/.84) 100%)}.ma-editorial-media__visual{min-height:340px}.ma-editorial-media__copy{padding:2.5rem 1.25rem}}/* Paritate mock-up pentru noile blocuri editoriale. */

.home .metalicart-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after{margin-left:.75rem;content:'→';font-size:var(--ma-fs-md, .9rem)}.home .metalicart-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link{min-width:204px}
.metalicart-home-categories>.wp-block-metalicart-section-heading,.metalicart-portfolio-section .wp-block-metalicart-section-heading{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:.3rem 3rem;align-items:end;width:100%;max-width:1160px;min-width:0;box-sizing:border-box;margin:0 auto 3.5rem}.metalicart-home-categories>.wp-block-metalicart-section-heading>*,.metalicart-portfolio-section .wp-block-metalicart-section-heading>*{min-width:0;max-width:100%;overflow-wrap:anywhere}.metalicart-home-categories>.wp-block-metalicart-section-heading .metalicart-eyebrow,.metalicart-home-categories>.wp-block-metalicart-section-heading .metalicart-section-title,.metalicart-portfolio-section .wp-block-metalicart-section-heading .metalicart-eyebrow,.metalicart-portfolio-section .wp-block-metalicart-section-heading .metalicart-section-title{grid-column:1}.metalicart-home-categories>.wp-block-metalicart-section-heading>p:last-child,.metalicart-portfolio-section .wp-block-metalicart-section-heading>p:last-child{grid-column:2;grid-row:1/3;align-self:end;margin:0 0 .45rem;line-height:1.75}.metalicart-portfolio-section .wp-block-metalicart-section-heading>p:last-child{color:rgb(244 237 224/.68)}
@media(max-width:782px){.metalicart-home-categories>.wp-block-metalicart-section-heading,.metalicart-portfolio-section .wp-block-metalicart-section-heading{grid-template-columns:1fr;gap:.4rem;margin-bottom:2.5rem}.metalicart-home-categories>.wp-block-metalicart-section-heading>p:last-child,.metalicart-portfolio-section .wp-block-metalicart-section-heading>p:last-child{grid-column:1;grid-row:auto;margin-top:.5rem}}

/* ==========================================================================
   Antet, bară de sus și meniu.

   O singură sursă pentru tot ce ține de antet. Geometria vine din variabilele
   pe care „MetalicArt → Antet și meniu” le scrie în <head>; comportamentul vine
   din clasele de pe <body>. Nimic nu mai este fixat în cod.
   ========================================================================== */

:root {
  --ma-header-h: 86px;
  --ma-header-h-scrolled: 68px;
  --ma-header-h-mobile: 68px;
  --ma-topbar-h: 38px;
  --ma-header-logo: 194px;
  --ma-header-logo-mobile: 138px;
  --ma-header-ink: rgb(11 12 11 / .96);
  --ma-header-shift: 0px;
}

/* --- Bara de sus ------------------------------------------------------- */

.metalicart-topbar {
  height: var(--ma-topbar-h);
  overflow: hidden;
  border-bottom: 1px solid rgb(225 178 112 / .16);
  background: #0a0b0a;
  color: rgb(244 237 224 / .74);
  font-size: var(--ma-fs-xs, .72rem);
  letter-spacing: .04em;
  transition: height .32s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
}
.ma-topbar-copper .metalicart-topbar { background: #7a4526; color: rgb(255 246 236 / .92); }
.ma-topbar-cream .metalicart-topbar { background: var(--wp--preset--color--cream); color: #3a3129; border-bottom-color: rgb(75 65 53 / .18); }
.metalicart-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
}
.ma-topbar__message { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-topbar__links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); white-space: nowrap; }
/*
 * Semnul și textul, centrate pe verticală într-un rând flexibil. Ca element inline, aliniat cu
 * `vertical-align`, fiecare semn stătea altfel: cutiile lor diferă (1,15, 1,31 și 1,5 em, vezi mai
 * jos), iar aceeași deplasare nu le putea centra pe toate.
 */
.ma-topbar__link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: color .2s ease; }
.ma-topbar__link:hover { color: var(--metalicart-text-accent); }
.ma-topbar-cream .ma-topbar__link:hover { color: var(--wp--preset--color--copper); }
/*
 * Semnele barei vin din pachetul de interfață, nu din caractere Unicode.
 *
 * Telefonul, plicul și adresa erau ☎, ✉ și ◆ — semne de font, care se desenau cum voia fontul
 * fiecărui sistem și se colorau din `currentColor`. Acum sunt cele patru imagini livrate, cerute
 * prin proprietățile scrise de plugin pe rădăcină. Sunt gata finisate în cupru patinat, deci nu se
 * mai recolorează în cele două tonuri ale barei: culoarea este a lor.
 *
 * Adresa nu este link, dar poartă același semn ca în subsol: reperul de hartă.
 */
.ma-topbar__link::before {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-right: .4rem;
  /* Centrat pe rând, desenul cade cu ~0,8 px sub mijlocul cifrelor și al majusculelor. */
  transform: translateY(-.05em);
  background: var(--ma-topbar-semn) center / contain no-repeat;
  content: '';
}
.ma-topbar__link.is-phone::before { --ma-topbar-semn: var(--ma-ui-telefon, url("/wp-content/plugins/metalicart-core/assets/ui-icons/256/telefon.png")); }
.ma-topbar__link.is-email::before { --ma-topbar-semn: var(--ma-ui-email, url("/wp-content/plugins/metalicart-core/assets/ui-icons/256/email.png")); }
.ma-topbar__link.is-address::before { --ma-topbar-semn: var(--ma-ui-adresa, url("/wp-content/plugins/metalicart-core/assets/ui-icons/256/adresa.png")); }
.ma-topbar__link.is-facebook::before { --ma-topbar-semn: var(--ma-ui-facebook, url("/wp-content/plugins/metalicart-core/assets/ui-icons/256/facebook.png")); }

/*
 * Cutiile nu sunt egale, ca desenele să iasă egale.
 *
 * Aceeași socoteală ca în subsol, unde este scrisă în cod: se ia receptorul drept reper și fiecare
 * semn primește cutia mai mică dintre două — cea în care cântărește cât el și cea în care se vede
 * la fel de înalt. Plicul se oprește la cântar, reperul și „f”-ul la înălțime. Vezi
 * `Icons::uiCutie()` pentru regulă; numerele de aici vin din ea, cu reperul la 1,15em.
 */
/* Adresa de email e numai cu litere mici: plicul se centrează pe corpul lor, fără ridicarea de mai sus. */
.ma-topbar__link.is-email::before { width: 1.5em; height: 1.5em; transform: none; }
.ma-topbar__link.is-address::before,
.ma-topbar__link.is-facebook::before { width: 1.31em; height: 1.31em; }

/* The bar folds away once the page scrolls, so the header keeps its own height. */
.ma-header-shrink .metalicart-site-header.is-scrolled .metalicart-topbar { height: 0; opacity: 0; }

/* --- Antet ------------------------------------------------------------- */

.metalicart-site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
  background: var(--ma-header-ink);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), background .28s ease, box-shadow .28s ease;
}
.ma-header-sticky .metalicart-site-header { position: fixed; top: 0; right: 0; left: 0; }
.ma-header-border .metalicart-site-header { border-bottom: 1px solid rgb(225 178 112 / .14); }
.ma-header-blur .metalicart-site-header.is-scrolled { backdrop-filter: blur(16px); }

/*
 * Sertarul se deschide ca strat `position: fixed` din interiorul antetului. Un element cu
 * `backdrop-filter` devine bloc de referință pentru descendenții fixați, deci după derulare
 * sertarul se limita la înălțimea antetului și rămânea ascuns în bandă. Cât timp meniul este
 * deschis, blurul oricum nu se vede: sertarul și vălul lui acoperă ecranul.
 */
html.has-modal-open .ma-header-blur .metalicart-site-header.is-scrolled,
html.ma-nav-deschis .ma-header-blur .metalicart-site-header.is-scrolled,
html.has-modal-open .metalicart-site-header,
html.ma-nav-deschis .metalicart-site-header { backdrop-filter: none; }

.metalicart-site-header.is-scrolled { background: var(--ma-header-ink); box-shadow: 0 10px 34px rgb(0 0 0 / .28); }

/* Transparent over the hero, opaque as soon as the page moves. */
.ma-header-transparent .metalicart-site-header {
  background: linear-gradient(180deg, rgb(8 9 9 / .78), rgb(8 9 9 / .12));
  box-shadow: none;
}
.ma-header-transparent .metalicart-site-header.is-scrolled {
  background: var(--ma-header-ink);
  box-shadow: 0 10px 34px rgb(0 0 0 / .28);
}

/* Scroll behaviours. `--ma-header-shift` is driven by the theme script. */
.ma-header-scroll-hide-on-scroll .metalicart-site-header,
.ma-header-scroll-reveal-after-hero .metalicart-site-header { transform: translateY(var(--ma-header-shift)); }

/*
 * Cât ține meniul deschis, antetul nu mai are voie să se miște și nici să fie transformat.
 *
 * Sertarul meniului este `position: fixed`, dar stă înăuntrul antetului, iar un strămoș cu
 * `transform` devine bloc de referință pentru descendenții fixați: sertarul nu se mai raportează
 * la ecran, ci la cutia antetului, și merge oriunde merge antetul. `translateY(0px)` este tot o
 * transformare, deci legătura există chiar și când antetul stă pe loc.
 *
 * De aici venea fâșia din site care se ivea jos. Măsurat la 390x844, cu pagina derulată: antetul
 * era retras la -127 px, iar la deschiderea meniului aluneca înapoi la 0 în 340 ms — cu el aluneca
 * și meniul, care la 120 ms stătea între -63 și 781, adică 63 px de pagină la vedere sub el.
 * Împins cu -94 px, ajungea la -94..750: 94 px de fâșie. Pe telefon, retragerea barei de
 * adresă mișcă antetul la fel, deci fâșia apărea la orice tragere cu degetul.
 *
 * Aceeași grijă o primise deja `backdrop-filter` mai sus, din același motiv; `transform` fusese
 * uitat. Tranziția iese și ea din joc: interpolarea către `none` trece tot prin matrici, deci
 * blocul de referință ar fi supraviețuit încă 340 ms.
 */
html.has-modal-open .ma-header-scroll-hide-on-scroll .metalicart-site-header,
html.has-modal-open .ma-header-scroll-reveal-after-hero .metalicart-site-header,
html.ma-nav-deschis .ma-header-scroll-hide-on-scroll .metalicart-site-header,
html.ma-nav-deschis .ma-header-scroll-reveal-after-hero .metalicart-site-header {
  transform: none;
  transition-property: background, box-shadow;
}

.metalicart-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  height: var(--ma-header-h);
  margin-inline: auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  transition: height .32s cubic-bezier(.22, .61, .36, 1);
}
.ma-header-shrink .metalicart-site-header.is-scrolled .metalicart-header-inner { height: var(--ma-header-h-scrolled); }

/* Space for a fixed header, so the hero never hides behind it. */
.ma-header-sticky:not(.ma-header-transparent) .wp-site-blocks { padding-top: calc(var(--ma-header-h) + var(--ma-topbar-h)); }

.metalicart-site-logo { display: flex; align-items: center; flex: 0 0 auto; margin: 0; }
/*
 * Blocul de logo din WordPress fixează 120 px prin `.wp-block-site-logo.is-default-size img`.
 * Regula temei era cu o clasă mai slabă, deci pierdea: cursorul de dimensiune scria valoarea în
 * variabilă, dar aceasta nu ajungea niciodată pe imagine. Selectorii de mai jos o depășesc.
 */
/*
 * Logoul din subsol se măsoară de aici, împreună cu cel din antet.
 *
 * Sunt aceeași marcă și aceeași imagine, deci nu au de ce să aibă două mărimi: în subsol era
 * scris separat, 220 px, și rămânea 220 px oriunde — cu 26 px mai mare decât cel din antet pe
 * ecran lat și cu până la 94 px mai mare pe telefon, unde antetul se strânge și el nu. Acum
 * amândouă ascultă de aceleași reguli, inclusiv de cursorul de dimensiune din administrare.
 */
.metalicart-site-logo img,
.custom-logo,
.metalicart-site-logo.wp-block-site-logo.is-default-size img,
.metalicart-site-logo.wp-block-site-logo img,
.ma-footer__logo img {
  display: block;
  width: var(--ma-header-logo);
  max-width: var(--ma-header-logo);
  height: auto;
  object-fit: contain;
  transition: width .32s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Numai logoul din antet se micșorează lin — el are de ce, se strânge la derulare. Cel din subsol
 * nu se strânge niciodată, iar tranziția moștenită îl făcea să alunece la fiecare schimbare de
 * lățime: la rotirea telefonului, și la fel în capturile suitei, unde măsurarea cădea peste
 * animație și citea contrastul din pixeli mutați.
 */
.ma-footer__logo img { transition: none; }

/* Meniul stătea pe două rânduri: îi lipseau 59 px. Spațiul dintre logo, meniu și acțiuni
   era de 36 px, cel dintre linkuri de 28,8; strânse, cele cinci intră pe un rând. Clasa de
   layout urcă puterea selectorului peste distanța dintre blocuri pusă de WordPress. */
.metalicart-header-inner.is-layout-flex { gap: clamp(.75rem, 1.2vw, 1.15rem); }


/* --- Acțiuni ----------------------------------------------------------- */

.metalicart-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(.6rem, 1vw, .9rem); }
.ma-header-phone { margin: 0; white-space: nowrap; font-size: var(--ma-fs-sm, .74rem); font-weight: 600; letter-spacing: .02em; }
.ma-header-phone a { color: var(--wp--preset--color--cream); text-decoration: none; transition: color .2s ease; }
.ma-header-phone a:hover { color: var(--metalicart-text-accent); }
/* Ultimul caracter Unicode de iconiță din antet, înlocuit cu receptorul livrat. */
.ma-header-phone a::before {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: .42rem;
  vertical-align: -.3em;
  background: var(--ma-ui-telefon, url("/wp-content/plugins/metalicart-core/assets/ui-icons/256/telefon.png")) center / contain no-repeat;
  content: '';
}
.metalicart-header-actions .wp-block-button__link {
  border-radius: 0;
  padding: .62rem 1.15rem;
  font-size: var(--ma-fs-sm, .62rem);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.metalicart-header-actions .wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--metalicart-text-accent);
  color: var(--metalicart-text-accent);
  background: transparent;
}
.metalicart-header-actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--iron);
  background: var(--metalicart-text-accent);
}

/* --- Antetul pe ecrane strânse ----------------------------------------- */

/*
 * Navigația își are praguri proprii, în foaia ei: panoul se strânge sub 1200 px și lasă locul
 * sertarului sub 992 px. Ce rămâne aici privește antetul, nu meniul — înălțimea lui și numărul
 * de telefon, care de la 1130 px în jos nu mai are loc scris lângă listă. Sub 1200 px foaia
 * navigației îl aduce înapoi ca semn de telefon, cu același nume accesibil, deci acțiunea nu se
 * pierde la nicio lățime.
 */
@media (max-width: 1130px) {
  /*
   * Dacă bara de sus se pliază la derulare, butoanele antetului urcă 38 px chiar în timpul
   * tranziției, adică exact atunci când degetul le atinge, iar atingerea cade alături. Aici
   * antetul își schimbă numai fundalul, nu și geometria — inclusiv cât ține panoul deschis,
   * care este agățat de marginea de jos a antetului.
   */
  .ma-header-shrink .metalicart-site-header.is-scrolled .metalicart-topbar {
    height: var(--ma-topbar-h);
    opacity: 1;
  }
  .ma-header-shrink .metalicart-site-header.is-scrolled .metalicart-header-inner {
    height: var(--ma-header-h);
  }

  .metalicart-header-actions .ma-header-phone { display: none; }

}


@media (max-width: 782px) {
  .metalicart-header-inner { height: var(--ma-header-h-mobile); }
  .ma-header-shrink .metalicart-site-header.is-scrolled .metalicart-header-inner { height: var(--ma-header-h-mobile); }
  .metalicart-site-logo img,
  .custom-logo,
  .metalicart-site-logo.wp-block-site-logo.is-default-size img,
  .metalicart-site-logo.wp-block-site-logo img,
  .ma-footer__logo img { width: var(--ma-header-logo-mobile); max-width: var(--ma-header-logo-mobile); }
  .ma-header-sticky:not(.ma-header-transparent) .wp-site-blocks { padding-top: calc(var(--ma-header-h-mobile) + var(--ma-topbar-h)); }
  .metalicart-topbar__inner { justify-content: center; }
  .ma-topbar__message { display: none; }
}

@media (max-width: 480px) {
  .ma-topbar__link.is-email, .ma-topbar__link.is-address { display: none; }
  .metalicart-header-actions .wp-block-button__link { padding: .55rem .85rem; font-size: var(--ma-fs-sm, .58rem); }
}

@media (prefers-reduced-motion: reduce) {
  .metalicart-site-header, .metalicart-header-inner, .metalicart-topbar,
  .metalicart-site-logo img, .custom-logo{ transition: none; }
}

/* --------------------------------------------------------------------------
   Blocuri de butoane randate de noi.

   Hero-ul și acțiunile din antet scriu direct markupul `wp-block-buttons`, iar
   WordPress încarcă foaia de stil a blocului Core numai când pagina conține un
   bloc `core/buttons` real. Când antetul a încetat să mai fie unul, butoanele
   din hero au rămas fără layout. Tema își declară acum singură aranjarea.
   -------------------------------------------------------------------------- */

.metalicart-hero .wp-block-buttons,
.metalicart-header-actions .wp-block-buttons,
.metalicart-cta-section .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
}
.metalicart-hero .wp-block-button,
.metalicart-header-actions .wp-block-button,
.metalicart-cta-section .wp-block-button { width: auto; }
.metalicart-hero .wp-block-button__link,
.metalicart-header-actions .wp-block-button__link { display: inline-block; text-decoration: none; }

@media (max-width: 480px) {
  .metalicart-hero .wp-block-buttons { gap: .75rem; }
}

/* --------------------------------------------------------------------------
   Spațiul pe care hero-ul îl lasă antetului transparent.

   Antetul stă peste fotografie, deci hero-ul trebuie să înceapă sub el. Valorile
   vin din aceleași variabile ca antetul, ca să rămână corecte la orice înălțime
   aleasă din administrare.
   -------------------------------------------------------------------------- */

.ma-header-transparent .metalicart-hero-inner {
  padding-top: calc(var(--ma-header-h) + var(--ma-topbar-h) + clamp(1.5rem, 4vw, 3.5rem));
}

@media (max-width: 782px) {
  .ma-header-transparent .metalicart-hero-inner {
    padding-top: calc(var(--ma-header-h-mobile) + var(--ma-topbar-h) + 2rem);
  }

  .metalicart-header-inner .metalicart-header-actions { order: 2; margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Intrarea hero-ului.

   Elementele pornesc ascunse și se descoperă în ordinea în care se citesc.
   Titlul folosește o mască verticală, ca și cum rândul ar fi turnat. Scriptul
   temei adaugă `is-revealed` la primul cadru, deci pagina nu rămâne niciodată
   goală dacă JavaScriptul nu rulează.

   Sunt trei heroturi, nu unul: cel randat de bloc, cel scris în patternul
   paginii „Fier forjat” și cel al paginii „Servicii de restaurare”. Numele
   claselor diferă, coregrafia nu — de aceea fiecare regulă le ia pe toate prin
   `:is()`, iar duratele și întârzierile rămân scrise o singură dată.
   -------------------------------------------------------------------------- */

.ma-motion :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero)
  :is(.metalicart-eyebrow, .ma-forge__eyebrow, .ma-restoration__eyebrow,
      .metalicart-hero-lead, .ma-forge-hero__lede, .ma-restoration__lede,
      .wp-block-buttons, .ma-restoration__actions,
      .metalicart-hero-signature, .ma-forge-hero__blazon, .ma-restoration__hero-accent,
      .ma-restoration__hero-divider, .metalicart-breadcrumb) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero) h1 .ma-hero-line { display: inline-block; }
.ma-motion :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero) h1 .ma-hero-line {
  opacity: 0;
  transform: translateY(.32em);
  filter: blur(6px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1),
              transform .95s cubic-bezier(.22, .61, .36, 1),
              filter .85s cubic-bezier(.22, .61, .36, 1);
}
.ma-motion .wp-block-metalicart-hero > .wp-block-cover__image-background,
.ma-motion .ma-forge-hero .ma-forge-hero__media img,
.ma-motion .ma-restoration__hero .ma-restoration__hero-media img {
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed
  :is(.metalicart-breadcrumb, .metalicart-eyebrow, .ma-forge__eyebrow, .ma-restoration__eyebrow,
      .metalicart-hero-lead, .ma-forge-hero__lede, .ma-restoration__lede,
      .wp-block-buttons, .ma-restoration__actions,
      .metalicart-hero-signature, .ma-forge-hero__blazon, .ma-restoration__hero-accent, .ma-restoration__hero-divider) { opacity: 1; transform: translateY(0); }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed h1 .ma-hero-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.wp-block-metalicart-hero.is-revealed > .wp-block-cover__image-background,
.ma-forge-hero.is-revealed .ma-forge-hero__media img,
.ma-restoration__hero.is-revealed .ma-restoration__hero-media img { transform: scale(1); }

/*
 * The reading order sets the timing.
 *
 * Fiecare piesă trebuie trecută și aici, nu doar în lista care o ascunde. O piesă uitată nu rămâne
 * nemișcată — pornește la zero, adică înaintea titlului, și atunci intrarea nu mai curge, ci se
 * smucește: la „Servicii de restaurare” supratitlul, fraza și butoanele apăreau deodată, iar titlul
 * abia pe urmă.
 */
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed .metalicart-breadcrumb { transition-delay: .05s; }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed :is(.metalicart-eyebrow, .ma-forge__eyebrow, .ma-restoration__eyebrow) { transition-delay: .12s; }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed h1 .ma-hero-line:first-child { transition-delay: .24s; }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed h1 .ma-hero-accent { transition-delay: .40s; }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed :is(.metalicart-hero-lead, .ma-forge-hero__lede, .ma-restoration__lede) { transition-delay: .58s; }
:is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero).is-revealed :is(.wp-block-buttons, .ma-restoration__actions) { transition-delay: .70s; }
.wp-block-metalicart-hero.is-revealed .metalicart-hero-signature,
.ma-forge-hero.is-revealed .ma-forge-hero__blazon,
.ma-restoration__hero.is-revealed .ma-restoration__hero-accent { transition-delay: .84s; }
/* Rombul despărțitor se descoperă între supratitlu și titlu, unde și stă. */
.ma-restoration__hero.is-revealed .ma-restoration__hero-divider { transition-delay: .50s; }

/*
 * The eyebrow rule draws itself alongside the text — dar din `scaleX`, nu din lățime.
 *
 * Animată pe lățime, linia rearanja rândul de text la fiecare cadru vreme de 0,7 s, iar pe coloană
 * îngustă putea chiar să mute ultimul cuvânt pe rândul următor în timpul mișcării. Din `scaleX`,
 * linia își are locul în așezare de la început și nu mai atinge nimic; același ritm, aceeași formă.
 */
.ma-motion .wp-block-metalicart-hero .metalicart-eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .22s;
}
.wp-block-metalicart-hero.is-revealed .metalicart-eyebrow::before { transform: scaleX(1); }
/*
 * Supratitlul de pe „Servicii de restaurare” are aceeași linie, dar se întinde din `scaleX`.
 *
 * Animată pe lățime, linia rearanjează rândul de text la fiecare cadru vreme de 0,7 s — și, la
 * lățimi mici, poate chiar să mute ultimul cuvânt pe rândul următor în timpul mișcării. Din
 * `scaleX`, linia își păstrează locul în așezare de la început și nu mai atinge nimic; același
 * ritm, aceeași formă. Heroul de pe „Fier forjat” face la fel, din același motiv.
 */
.ma-motion .ma-restoration__hero .ma-restoration__eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .22s;
}
.ma-restoration__hero.is-revealed .ma-restoration__eyebrow::before { transform: scaleX(1); }
/*
 * Linia supratitlului de pe „Fier forjat” are `flex-basis` fix, deci lățimea ei nu se poate anima
 * ca la celălalt hero: ar fi rămas pe loc. Se întinde din `scaleX`, cu același ritm.
 */
.ma-motion .ma-forge-hero .ma-forge__eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .22s;
}
.ma-forge-hero.is-revealed .ma-forge__eyebrow::before { transform: scaleX(1); }

/* Nothing moves for a visitor who asked for that, and nothing stays hidden. */
/*
 * Selectorii de aici încep tot cu `.ma-motion`, ca cei care ascund.
 *
 * Fără el, regulile ieșeau cu o clasă mai slabe decât starea ascunsă și nu o puteau întoarce:
 * vizibilitatea venea de fapt din `is-revealed`, adăugat de script în primul cadru. Între prima
 * pictare și cadrul acela, cine ceruse mai puțină mișcare vedea tot heroul gol — scurt, dar exact
 * ce nu trebuia să vadă. Egale ca putere și scrise mai jos, regulile câștigă din ordine.
 */
@media (prefers-reduced-motion: reduce) {
  .ma-motion :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero)
    :is(.metalicart-eyebrow, .ma-forge__eyebrow, .ma-restoration__eyebrow,
        .metalicart-hero-lead, .ma-forge-hero__lede, .ma-restoration__lede,
        .wp-block-buttons, .ma-restoration__actions,
        .metalicart-hero-signature, .ma-forge-hero__blazon, .ma-restoration__hero-accent,
        .ma-restoration__hero-divider, .metalicart-breadcrumb),
  .ma-motion :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero) h1 .ma-hero-line {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .ma-motion .wp-block-metalicart-hero .metalicart-eyebrow::before { transform: none; transition: none; }
  .ma-motion .ma-restoration__hero .ma-restoration__eyebrow::before { transform: none; transition: none; }
  .ma-motion .ma-forge-hero .ma-forge__eyebrow::before { transform: none; transition: none; }
  .ma-motion .wp-block-metalicart-hero > .wp-block-cover__image-background,
  .ma-motion .ma-forge-hero .ma-forge-hero__media img,
  .ma-motion .ma-restoration__hero .ma-restoration__hero-media img { transform: none; transition: none; }
}

/* The editor canvas shows the finished state, not the entrance. */
.editor-styles-wrapper :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero)
  :is(.metalicart-eyebrow, .ma-forge__eyebrow, .ma-restoration__eyebrow,
      .metalicart-hero-lead, .ma-forge-hero__lede, .ma-restoration__lede,
      .wp-block-buttons, .ma-restoration__actions,
      .metalicart-hero-signature, .ma-forge-hero__blazon, .ma-restoration__hero-accent,
      .ma-restoration__hero-divider),
.editor-styles-wrapper :is(.wp-block-metalicart-hero, .ma-forge-hero, .ma-restoration__hero) h1 .ma-hero-line {
  opacity: 1;
  filter: none;
  transform: none;
}
.editor-styles-wrapper .ma-forge-hero .ma-forge__eyebrow::before { transform: none; }
.editor-styles-wrapper .wp-block-metalicart-hero .metalicart-eyebrow::before { transform: none; }
.editor-styles-wrapper .ma-restoration__hero .ma-restoration__eyebrow::before { transform: none; }

/* Titlul hero are acum un cuvânt în plus; măsura și scara îl țin pe două rânduri. */
.home .metalicart-hero-copy { width: min(100%, 780px); max-width: 780px; }

/*
 * Supratitlul hero-ului de pe prima pagină își ține locul pentru două rânduri sub 500 px.
 *
 * Până se încarcă fontul site-ului, textul se vede cu cel de rezervă, iar cele două nu au aceeași
 * lățime: aici 325 px față de 394. Sub 490 px coloana este mai îngustă decât cel de rezervă, 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 — 15 px, măsurați la 430 și la 480. Rezervându-i locul, schimbul nu mai mută
 * nimic. Pragul este pus la 560, nu la 490 unde s-a măsurat ruptura: fontul de rezervă diferă de la
 * un sistem la altul, iar un rând rezervat degeaba costă 15 px de aer, pe când unul lipsă costă
 * chiar saltul care se repară aici.
 */
@media (max-width: 560px) {
  .home .wp-block-metalicart-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 (15 px la 12 px, adică 1,25).
     */
    min-height: calc(2 * 1.25em);
    min-height: 2lh;
  }
}
.home .metalicart-hero h1 { max-width: 780px; font-size: clamp(2.5rem, 3.5vw, 3.15rem); }
@media (max-width: 782px) {
  .home .metalicart-hero-copy { max-width: 100%; }
  .home .metalicart-hero h1 { max-width: 100%; font-size: clamp(2.3rem, 8vw, 3rem); }
}

/*
 * Butoanele hero-ului de pagină interioară.
 *
 * Calibrarea de 50 px era scrisă numai pentru `.home`, deci pe paginile interioare butonul
 * rămânea la 41 px, sub pragul de atingere. Aceleași valori se aplică acum și acolo.
 */
.metalicart-hero.is-category .wp-block-buttons { align-items: center; gap: .75rem; }
.metalicart-hero.is-category .wp-block-button__link {
  display: inline-flex;
  min-height: 50px;
  box-sizing: border-box;
  align-items: center;
  padding: 1rem 1.7rem;
  font-size: var(--ma-fs-sm, .63rem);
}
.metalicart-hero.is-category .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  border-color: #c96b2c;
  background: #c96b2c;
}
.metalicart-hero.is-category .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  border-color: #dc7a36;
  background: #dc7a36;
}


@keyframes ma-menu-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}


/*
 * Antetul pe ecrane înguste.
 *
 * Sub 400 px, logo-ul, butonul de ofertă și butonul de meniu cereau împreună 392 px într-un rând
 * de 360: butonul de meniu ieșea din ecran și nu mai putea fi atins, iar pagina nu se putea
 * derula lateral ca să fie adus înapoi.
 */
@media (max-width: 400px) {
  .metalicart-header-inner {
    gap: 10px;
    padding-inline: 12px;
  }
  .metalicart-header-actions .wp-block-button__link,
  .metalicart-header-actions .wp-element-button,
  .metalicart-header-actions a[class*="button"] {
    padding-inline: 12px;
    font-size: var(--ma-fs-sm, .58rem);
    letter-spacing: .06em;
  }
}

@media (max-width: 480px) {
  /*
   * Setarea din administrare rămâne, dar nu poate depăși ce încape pe ecran.
   *
   * Plafonul se calculează din lățimea reală, nu din praguri fixe. Restul antetului — butonul de
   * ofertă, telefonul și meniul burger — ocupă 226 px măsurat la 360 px; scăzând 234 px rămâne
   * exact cât încape logo-ul, cu puțin aer.
   *
   * Înainte erau două praguri fixe, 108 px sub 360 și 96 px sub 340. La 360 px — cea mai
   * răspândită lățime pe Android — orice valoare peste 108 nu avea niciun efect, iar cursorul din
   * administrare mergea până la 240. Setarea părea că nu funcționează.
   */
  .metalicart-site-logo img,
  .custom-logo,
  .metalicart-site-logo.wp-block-site-logo.is-default-size img,
  .metalicart-site-logo.wp-block-site-logo img,
  .ma-footer__logo img {
    /*
     * 214, nu 234: plafonul era mai strâns decât realitatea cu douăzeci de pixeli.
     *
     * Măsurat acum, la 390 și la 360 px, restul rândului cere 208,2 px — butonul de ofertă și
     * telefonul 116,2, butonul de meniu 44, cele două spații 24, marginile 24. Rămân deci 6 px de
     * aer, iar logoul crește cu douăzeci: la 390 px de la 156 la 176, la 360 px de la 126 la 146.
     */
    width: min(var(--ma-header-logo-mobile), calc(100vw - 214px));
    max-width: min(var(--ma-header-logo-mobile), calc(100vw - 214px));
  }
}

@media (max-width: 340px) {
  .metalicart-header-inner { gap: 8px; padding-inline: 10px; }
  .metalicart-site-logo img,
  .custom-logo,
  .metalicart-site-logo.wp-block-site-logo.is-default-size img,
  .metalicart-site-logo.wp-block-site-logo img,
  .ma-footer__logo img {
    /*
     * Sub 340 px antetul are gap și margini mai mici, deci logo-ului îi rămâne ceva mai mult —
     * dar nu chiar cu douăzeci de pixeli: la 202 rândul ieșea cu 2,2 px, iar butonul de ofertă se
     * strângea ca să încapă. 208 lasă din nou aer, aproape 4 px.
     */
    width: min(var(--ma-header-logo-mobile), calc(100vw - 208px));
    max-width: min(var(--ma-header-logo-mobile), calc(100vw - 208px));
  }
}


/* ================================================== Traseul din hero
 *
 * Armonizat cu restul site-ului: separatorii sunt romburi mici de cupru, ca la timeline-ul
 * procesului și la ornamentul din certificat, iar pasul curent este bronzul cu care meniul
 * marchează pagina deschisă. Așa traseul și meniul spun același lucru în același ton.
 */

.metalicart-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .62rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--ma-fs-xs, .74rem);
  letter-spacing: .04em;
  line-height: 1.6;
}

/*
 * Traseul stă peste o fotografie, deci luminozitatea contează mai mult decât nuanța. La
 * opacitatea de dinainte, textul cobora la 3,86:1 pe unele hero-uri de categorie, sub pragul AA
 * pentru 11,8 px.
 */
.metalicart-breadcrumb__step {
  color: rgb(244 237 224 / .88);
  text-decoration: none;
  transition: color .2s ease;
}
a.metalicart-breadcrumb__step:hover,
a.metalicart-breadcrumb__step:focus-visible { color: var(--metalicart-text-accent); }
a.metalicart-breadcrumb__step:focus-visible {
  outline: 2px solid var(--metalicart-text-accent);
  outline-offset: 3px;
}

/*
 * Pasul curent se distinge prin luminozitate și grosime, nu prin nuanță: bronzul meniului este
 * un ton mediu și, pe fotografie, cobora la 4,17:1. Accentul de cupru rămâne pe romburi.
 */
.metalicart-breadcrumb__step.is-current {
  color: #f6f0e4;
  font-weight: 600;
}

/* Rombul dintre pași. */
.metalicart-breadcrumb__sep {
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--metalicart-text-accent);
  opacity: .55;
  transform: rotate(45deg);
}

@media (max-width: 620px) {
  .metalicart-breadcrumb { gap: 0 .5rem; font-size: var(--ma-fs-xs, .7rem); }
  .metalicart-breadcrumb__sep { width: 3px; height: 3px; }
}

/*
 * Butonul „înapoi sus”.
 *
 * Tokenurile sunt declarate local, nu împrumutate din altă foaie: `var()` nerezolvat
 * invalidează întreaga declarație, iar foile de secțiune sunt versionate separat de aceasta.
 *
 * Ascuns înseamnă și `visibility: hidden`, nu doar `opacity: 0` — altfel butonul rămâne în
 * ordinea de tabulare cât timp nu se vede. Tranziția pe `visibility` este întârziată la
 * ascundere, ca dispariția să nu taie stingerea.
 */
.ma-to-top {
  --ma-tt-ink: rgb(11 12 11 / .92);
  --ma-tt-line: rgb(200 121 66 / .55);
  --ma-tt-mark: #e1b270;
  --ma-tt-size: 48px;
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: grid;
  box-sizing: border-box;
  place-items: center;
  width: var(--ma-tt-size);
  height: var(--ma-tt-size);
  border: 1px solid var(--ma-tt-line);
  border-radius: 50%;
  color: var(--ma-tt-mark);
  background: var(--ma-tt-ink);
  box-shadow: 0 14px 34px rgb(0 0 0 / .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease,
              color .22s ease, background .22s ease, visibility 0s linear .22s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ma-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease,
              color .22s ease, background .22s ease, visibility 0s;
}

/*
 * Semnul e o imagine, deci cercul nu se mai umple cu aramă la atingere.
 *
 * Umplerea mergea cât timp săgeata era desenată din `currentColor`: fondul se făcea aramă, iar
 * conturul se întuneca odată cu el. Săgeata livrată este ea însăși de aramă și nu se recolorează —
 * pachetul o cere neatinsă —, deci pe fondul de aramă se pierdea. Semnul rămâne, cercul se
 * adâncește și inelul se aprinde: aceeași dungă de aramă, altundeva.
 *
 * Hoverul se cere numai unde chiar există. Pe ecranele de atins rămânea lipit după apăsare: butonul
 * păstra starea de aramă până la următoarea atingere în altă parte, adică exact ce nu voia nimeni
 * după ce pagina se dusese deja sus.
 */
@media (hover: hover) and (pointer: fine) {
  .ma-to-top:hover {
    border-color: rgb(200 121 66 / .95);
    background: rgb(26 19 14 / .96);
    box-shadow: 0 16px 38px rgb(0 0 0 / .46);
  }
}

.ma-to-top:focus-visible {
  border-color: rgb(200 121 66 / .95);
  background: rgb(26 19 14 / .96);
}

.ma-to-top:focus-visible { outline: 2px solid #f0a56d; outline-offset: 3px; }
.ma-to-top { -webkit-tap-highlight-color: transparent; }
.ma-to-top.is-visible:active { transform: scale(.94); }
.ma-to-top svg,
.ma-to-top .ma-to-top__semn { display: block; }

/*
 * Butonul andocat în subsol.
 *
 * Același element, alt loc: iese din `fixed` și intră în curgerea barei de jos, unde are locul
 * lui rezervat. Aşa nu mai poate cădea peste linkurile juridice sau peste copyright, la nicio
 * lățime și la niciun zoom — pragul vine din geometria subsolului, nu dintr-o valoare aleasă
 * pentru un singur ecran.
 */
.ma-to-top.is-docked {
  position: static;
  right: auto;
  bottom: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Overlay-ul meniului mobil acoperă pagina; butonul nu are ce căuta peste el. */

@media (prefers-reduced-motion: reduce) {
  .ma-to-top,
  .ma-to-top.is-visible { transform: none; transition: opacity .22s ease, visibility 0s; }
  .ma-to-top.is-visible:active { transform: none; }
}

/*
 * Evidențierea nativă la atingere.
 *
 * Browserele de telefon desenează un dreptunghi albăstrui peste orice element atins, care
 * ignoră colțurile rotunde și se bate cu paleta site-ului. Se stinge peste tot; feedbackul la
 * apăsare îl dau stările proprii `:active` și `:hover`.
 *
 * Nu atinge accesibilitatea: proprietatea privește numai atingerea. Inelul de focus pentru
 * tastatură rămâne exact cum era.
 */
a, button, summary, label, input, select, textarea, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ Paralaxă */

/*
 * Fotografiile de fundal se mișcă mai încet decât pagina, la două secțiuni.
 *
 * Numai la două, și nu din economie: paralaxa cere ca fotografia să aibă mai mult decât se vede,
 * altfel marginile ei ar intra în cadru și ar trebui mărită, adică ar pierde din rezoluție.
 * Măsurat pe pagină, rezerva verticală este de 32,4 % la „Diferența se vede în detalii” și 18,5 %
 * la hero-urile de categorie, dar zero la hero-ul de pe prima pagină și 3,8 % la cel de contact:
 * acolo fotografia este deja tăiată pe lățime, deci n-are de unde să alunece. Panoul „Povestea
 * atelierului” este exclus fiindcă pachetul lui aprobat interzice explicit paralaxa.
 *
 * Mecanismul este `animation-timeline: view()`: cronologia este chiar trecerea secțiunii prin
 * ecran, deci nu există JavaScript, nici ascultător de derulare, iar mișcarea rulează pe
 * compozitor, fiind `transform`. Cadrul crește simetric cu distanța de deplasare, ca fotografia
 * să acopere secțiunea la ambele capete ale drumului; la mijlocul drumului încadrarea este cea
 * dinainte.
 *
 * Pragul de 1200 px nu este ales din gust, ci măsurat. Cadrul mai înalt costă rezoluție doar
 * acolo unde înălțimea dictează scara fotografiei: la 1200 px și peste, costul este zero la
 * amândouă secțiunile; la 1100 px ajunge la 2 %, la 1024 px la 12 %, iar la 390 px fotografia
 * este oricum întinsă de trei ori și jumătate. Deci efectul rulează exact acolo unde este gratuit.
 *
 * Browserele fără `view()` — Safari și Firefox, deocamdată — primesc fotografia neclintită, iar
 * cine a cerut mai puțină mișcare o primește la fel: efectul este un plus, nu o condiție.
 */
@keyframes ma-parallax {
  from { transform: translateY(calc(-1 * var(--ma-parallax))); }
  to { transform: translateY(var(--ma-parallax)); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
    .metalicart-difference .wp-block-cover__image-background,
    .metalicart-category-hero .wp-block-cover__image-background {
      --ma-parallax: 48px;

      top: calc(-1 * var(--ma-parallax));
      height: calc(100% + 2 * var(--ma-parallax));
      animation: ma-parallax linear both;
      animation-timeline: view();
      /*
       * Fără `will-change: transform`, deși pare că ar ajuta.
       *
       * Cu el, cadrele au ieșit de 25–29 ms la derulare, față de 16,6 ms fără — pe o mașină fără
       * accelerare grafică, un strat compus separat pentru o fotografie de 1440 pe 826 costă mai
       * mult decât redesenarea pe loc. Măsurat de trei ori, în ambele stări.
       */
    }
  }
}

/*
 * O singură scară pentru hero și un singur ritm între secțiuni.
 *
 * Până aici fiecare pagină își calibrase hero-ul separat. Măsurat la 1440 px: titlul ieșea
 * 50 px pe prima pagină, 72 la categorii, 75 la contact și 82 pe „Fier forjat”, cu patru
 * paddinguri (180/52, 120/64, 180/80, 110/170) și patru rigle din stânga (140, 80, 80, 130).
 * Ritmul dintre secțiuni avea șapte valori: 52, 72, 88, 96, 101, 115, 128.
 *
 * Reperul ales este hero-ul paginilor de categorie, iar coloana urcă la 1180 px, cât au deja
 * puntea, grilele și compozițiile mai noi. Valorile stau în variabile: cine schimbă scara
 * schimbă un rând, nu paisprezece reguli.
 */
/*
 * Scara stă în `theme.json`, sub `settings.custom`, nu aici.
 *
 * Foile de secțiune sunt versionate după `mtime`, iar `style.css` după antetul temei: un token
 * declarat aici și folosit acolo ajunge în browser cu două vieți de cache. Copia veche a foii
 * temei nu-l are, `var()` rămâne nerezolvat, iar declarația întreagă cade — așa s-a rupt o dată
 * conturul butoanelor pe telefoanele care aveau `style.css` în cache. Valorile din `theme.json`
 * sunt tipărite de WordPress în pagină, în linie, deci nu pot rămâne în urmă.
 *
 * Aici rămân numai ajustările pe praguri, de mai jos: dacă foaia asta e veche, lipsesc doar ele,
 * iar scara de bază este tot cea corectă.
 */

.metalicart-hero.wp-block-metalicart-hero .metalicart-hero-inner,
.home .metalicart-hero.wp-block-metalicart-hero .metalicart-hero-inner,
.ma-contact-page .metalicart-hero.wp-block-metalicart-hero .metalicart-hero-inner {
  display: block;
  min-height: 0;
  width: calc(100% - 2 * var(--wp--custom--ma-hero-gutter));
  max-width: var(--wp--custom--ma-hero-col) !important;
  padding: var(--wp--custom--ma-hero-pad-top) 0 var(--wp--custom--ma-hero-pad-bottom);
}

.metalicart-hero.wp-block-metalicart-hero h1,
.home .metalicart-hero.wp-block-metalicart-hero h1,
.ma-contact-page .metalicart-hero.wp-block-metalicart-hero h1 {
  max-width: var(--wp--custom--ma-hero-title-max);
  margin-block: var(--wp--custom--ma-hero-title-mb);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--custom--ma-hero-title);
  font-weight: 500;
  line-height: var(--wp--custom--ma-hero-title-lh);
  letter-spacing: normal;
}

.metalicart-hero.wp-block-metalicart-hero .metalicart-eyebrow,
.home .metalicart-hero.wp-block-metalicart-hero .metalicart-eyebrow {
  margin: 0;
  font-size: var(--wp--custom--ma-hero-eyebrow);
  letter-spacing: .18em;
}

.metalicart-hero.wp-block-metalicart-hero .metalicart-hero-lead,
.home .metalicart-hero.wp-block-metalicart-hero .metalicart-hero-lead,
.ma-contact-page .metalicart-hero.wp-block-metalicart-hero .metalicart-hero-lead {
  max-width: var(--wp--custom--ma-hero-lead-max);
  margin: 0;
  font-size: var(--wp--custom--ma-hero-lead);
  line-height: 1.75;
}

/*
 * Hero-ul nu mai centrează vertical și nu mai are înălțimi minime proprii.
 *
 * Centrarea făcea ca aceeași padding-ere să dea alt rezultat pe fiecare pagină: supratitlul
 * cădea la 218 px pe prima pagină, 193 la categorii, 233 la contact și 283 pe „Fier forjat”,
 * fiindcă fiecare hero avea altă înălțime minimă și conținutul plutea în mijloc. Așezat de sus,
 * cu padding din variabile, textul pornește de la aceeași cotă peste tot.
 */
.metalicart-hero.wp-block-metalicart-hero,
.home .metalicart-hero.wp-block-metalicart-hero,
.ma-contact-page .metalicart-hero.wp-block-metalicart-hero {
  display: block;
  min-height: 0;
}

/*
 * Scara hero-ului pe ecrane mici — tot din reperul paginilor de categorie.
 *
 * Marginea de jos rămâne generoasă pe telefon fiindcă acolo fotografia se vede doar ca o bandă
 * sub buton: textul ia toată lățimea, iar fără ea hero-ul ar fi un dreptunghi întunecat cu text.
 */
@media (max-width: 1024px) {
  :root { --wp--custom--ma-hero-title: clamp(2.4rem, 6vw, 3.4rem); }
}

@media (max-width: 782px) {
  :root {
    --wp--custom--ma-hero-title: clamp(2.1rem, 8.6vw, 2.9rem);
    --wp--custom--ma-hero-title-mb: .6rem 1rem;
    --wp--custom--ma-hero-pad-bottom: clamp(5rem, 22vw, 7rem);
  }
}

/* Butoanele hero-ului, aceeași mărime pe toate paginile. */
.metalicart-hero.wp-block-metalicart-hero .wp-block-button__link,
.ma-contact-page .metalicart-hero.wp-block-metalicart-hero .wp-block-button__link {
  font-size: var(--wp--custom--ma-hero-button);
}

/*
 * Blazonul „Tradițional · foc, nicovală, ciocan” în locul semnăturii „Lucrat la cald” din hero-ul
 * primei pagini (Editorial::render). Aceeași poziție și aceeași apariție ca semnătura; fără
 * fundalul, linia de cupru, umplutura și grila casetei de text, care nu au ce căuta lângă o imagine.
 */
.home .metalicart-hero-signature--blazon {
  display: block;
  right: 0;
  bottom: 40px;
  width: 147px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home .metalicart-hero-signature--blazon img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgb(0 0 0 / .45));
}
@media (max-width: 1024px) {
  .home .metalicart-hero-signature--blazon { width: 119px; bottom: 32px; }
}
/* Sub 860 px nu mai are loc lângă text fără să-l atingă, iar pe telefon hero-ul e o coloană: blazonul lipsește. */
@media (max-width: 859px) {
  .home .metalicart-hero-signature--blazon { display: none; }
}

/*
 * Lucirea blazonului: o singură trecere a unei lumini înguste peste metal, de la stânga la dreapta,
 * la încărcarea primei pagini, după ce blazonul și-a terminat apariția. Lumina e decupată după
 * forma lui (aceeași imagine, ca mască), deci nu se vede nicio bandă pe fundalul fotografiei.
 * Fără mișcare pentru cine o cere.
 */
.home .metalicart-hero-signature--blazon::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 47.5%, rgb(255 240 215 / .5) 50%, transparent 52.5%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: url("assets/sections/forge/blazoane/blazon-traditional-foc-nicovala-ciocan-360.webp") center / contain no-repeat;
  mask: url("assets/sections/forge/blazoane/blazon-traditional-foc-nicovala-ciocan-360.webp") center / contain no-repeat;
  animation: ma-blazon-lucire 1.6s ease-in-out 1.9s 1 both;
}
@keyframes ma-blazon-lucire {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home .metalicart-hero-signature--blazon::after { content: none; animation: none; }
}