/**
 * ads-factory-child: macheta de telefon din hero-ul paginii /servicii/social-media (43).
 * Spec: docs/superpowers/specs/2026-09-12-social-hub-hero-design.md
 *
 * Tot stilul machetei traieste aici, nu in clase Tailwind scrise din JS:
 * build/tailwind.config.cjs scaneaza ../assets/js/*.js, dar nu si assets/js/motion/*.js,
 * deci o clasa care apare doar in social-hub.js ar fi purjata la urmatorul build.
 * Tokenii de culoare sunt globali, ii folosim direct.
 *
 * Macheta e injectata de script, deci fara JS niciuna dintre regulile de aici nu se aplica.
 */

/* Rezervarea spatiului, ca substitutia sa nu miste layout-ul.
 *
 * Modulul ascunde cardul cu bife (~243px) si pune in loc telefonul (534px), dar ruleaza abia dupa
 * primul paint, fiindca scriptul e in footer. Fara regula asta, hero-ul creste sub ochii
 * vizitatorului: CLS masurat 0.1016, adica peste pragul Google de "good".
 *
 * Fiindca CSS-ul se incarca in head, inaltimea e rezervata inainte de primul paint, deci nu mai
 * exista salt. Costul, acceptat de owner pe 12.09.2026: cine are JS blocat vede cardul cu spatiu
 * liber sub el. Cu JS, spatiul e gol doar cateva zeci de milisecunde, pana cand telefonul il umple.
 *
 * Valoarea e inaltimea totala a machetei: ecran 502 + notch 20 + rame 2x6. Daca se schimba
 * vreuna dintre ele, se schimba si aici, altfel saltul revine. Nu depinde de latime: ecranul are
 * aceeasi inaltime si la 280px, si la 300px.
 */
body.page-id-43 section.hero-gradient .grid > .lg\:col-span-2 {
	min-height: 534px;
}

/**
 * Rezervarea spatiului pe pagina 118, ca substitutia sa nu miste layout-ul.
 *
 * Acelasi motiv ca pe pagina 43: modulul ascunde cardul si pune in loc telefonul, dar ruleaza
 * dupa primul paint. Fara regula asta, hero-ul creste sub ochii vizitatorului. Pe pagina 43, unde
 * regula a venit abia dupa livrare, lipsa ei a costat doua runde: CLS 0.06, apoi 0.1016 dupa o
 * corectie de proportie. Pagina 118 nu a fost niciodata livrata fara ea.
 *
 * Valoarea e inaltimea totala a machetei: ecran 502 + notch 20 + rame 2x6. Daca se schimba
 * vreuna, se schimba si aici.
 */
body.page-id-118 section.hero-gradient .grid.lg\:grid-cols-5 > .lg\:col-span-2 {
	min-height: 534px;
}

/* Aceleasi dimensiuni ca machetele de pe 41 si 46-49, care folosesc w-[280px] md:w-[300px].
   Raportul inaltime/latime tinta e ~1.78, cat are google-ads; sub 768px latimea scade la 280 si
   raportul urca la ~1.84, cat are facebook-ads, deci ramane in familia celorlalte pagini. */
.adsf-sh-wrap { position: relative; margin: 0 auto; width: 280px; max-width: 100%; }

@media ( min-width: 768px ) {
	.adsf-sh-wrap { width: 300px; }
}

.adsf-sh-phone {
	border: 6px solid hsl( var( --foreground ) / 0.2 );
	border-radius: 2.5rem;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgb( 0 0 0 / 0.45 );
}

.adsf-sh-notch { width: 6rem; height: 1.25rem; margin: 0 auto; background: hsl( var( --foreground ) / 0.2 ); border-radius: 0 0 1rem 1rem; }

/* Inaltime fixa: panoul de lead-uri e absolut in interiorul ei, deci layout-ul nu se misca. */
.adsf-sh-screen { position: relative; height: 502px; overflow: hidden; color: #1a1a1a; font-size: 12px; line-height: 1.45; }
.adsf-sh-pad { padding: 12px; }

.adsf-sh-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.adsf-sh-avatar { width: 28px; height: 28px; border-radius: 9999px; background: linear-gradient( 135deg, #c7d2fe, #fbcfe8 ); flex: none; }
.adsf-sh-name { font-size: 11px; font-weight: 700; }
.adsf-sh-sub { font-size: 9px; color: #6b7280; }
.adsf-sh-badge { margin-left: auto; background: hsl( var( --primary ) ); color: hsl( var( --primary-foreground ) ); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; }

.adsf-sh-creative { height: 210px; border-radius: 10px; background: linear-gradient( 135deg, hsl( var( --primary ) ), #db2777 ); margin-bottom: 8px; }
.adsf-sh-copy { font-size: 10px; color: #6b7280; margin-bottom: 8px; }

.adsf-sh-react { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.adsf-sh-comments { margin-left: auto; font-size: 10px; color: #6b7280; }
.adsf-sh-rule { height: 1px; background: #e5e7eb; margin: 8px 0; }
.adsf-sh-actions { display: flex; justify-content: space-around; font-size: 10px; color: #6b7280; }

/* Contoarele: latime stabila, ca numararea sa nu rearanjeze randul. */
.adsf-sh-num { font-variant-numeric: tabular-nums; }
.adsf-sh-leads-count { min-width: 2ch; text-align: right; font-size: 17px; font-weight: 800; color: hsl( var( --primary ) ); }

.adsf-sh-panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	border-top: 2px solid hsl( var( --primary ) );
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -8px 24px rgb( 0 0 0 / 0.12 );
	/* Padding-ul de sus e mai mare decat restul intentionat, ca sa dea aer intre marginea portocalie
	   a panoului si titlul "Lead-uri din campanie". Cu ecranul la 502px, panoul se opreste la 339px,
	   imediat sub randul de actiuni (322-337px), pe care nu il mai acopera. Marja e de doar 2px, deci
	   daca se schimba inaltimea ecranului, font-size-ul din feed sau inaltimea creativului, remasoara:
	   la 420px, cat avea ecranul initial, panoul taia coada literelor din randul de actiuni. */
	padding: 28px 12px 12px;
}
.adsf-sh-panel--down { transform: translateY( 100% ); }
.adsf-sh-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.adsf-sh-panel-title { font-size: 11px; font-weight: 700; }

.adsf-sh-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 10px; }
.adsf-sh-row--off { opacity: 0; transform: translateX( -8px ); }
.adsf-sh-dot { width: 20px; height: 20px; border-radius: 9999px; background: linear-gradient( 135deg, #c7d2fe, #fbcfe8 ); flex: none; }
.adsf-sh-when { color: #6b7280; }

/* Tranzitiile pornesc doar cand animatia e permisa; altfel starile se aplica instant. */
.motion-ready .adsf-sh-panel { transition: transform 600ms cubic-bezier( 0.22, 1, 0.36, 1 ); }
.motion-ready .adsf-sh-row { transition: opacity 350ms ease, transform 350ms ease; }

/* ---- Scena 118: cautare locala pe pagina de restaurante ---- */

.adsf-sh-search { display: flex; align-items: center; gap: 6px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 7px 11px; font-size: 11px; }
.adsf-sh-query { white-space: nowrap; overflow: hidden; }

/* Cursorul clipeste doar cat timp animatia e permisa: la reduce motion macheta e statica. */
.adsf-sh-caret { display: inline-block; width: 1px; height: 11px; background: #111827; vertical-align: -1px; }
.motion-ready .adsf-sh-caret { animation: adsf-sh-blink 1s step-end infinite; }
@keyframes adsf-sh-blink { 50% { opacity: 0; } }

.adsf-sh-res { border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px; margin-top: 9px; }
.adsf-sh-res--off { opacity: 0; transform: translateY( 6px ); }
.adsf-sh-res--hi { border-color: hsl( var( --primary ) ); background: hsl( var( --primary ) / 0.05 ); }
.adsf-sh-res-name { font-size: 12px; font-weight: 700; }
.adsf-sh-res-meta { font-size: 9.5px; color: #6b7280; margin-top: 2px; }
.adsf-sh-res-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.adsf-sh-res-url { font-size: 9px; color: #6b7280; }

.adsf-sh-book { margin-top: 8px; background: hsl( var( --primary ) ); color: hsl( var( --primary-foreground ) ); text-align: center; font-size: 11px; font-weight: 700; padding: 7px; border-radius: 8px; }
.adsf-sh-book--off { opacity: 0; transform: scale( 0.96 ); }

.adsf-sh-ok { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #065f46; color: #fff; font-size: 10.5px; padding: 10px; border-radius: 10px; line-height: 1.5; }
.adsf-sh-ok--off { opacity: 0; transform: translateY( 10px ); }

.motion-ready .adsf-sh-res,
.motion-ready .adsf-sh-book,
.motion-ready .adsf-sh-ok { transition: opacity 400ms ease, transform 400ms ease; }