/* Pagina de aterizare pentru meșteri (/pentru-mesteri).
 *
 * Culorile și cuvintele urmează reclama de pe Facebook, ca omul care a dat
 * clic pe ea să recunoască unde a ajuns. Restul e pe variabilele din site.css,
 * deci tema întunecată merge fără reguli separate. Cardurile de lucrări vin
 * din lucrari.css, întrebările din contact.css.
 */

.pm-hero {
  background: linear-gradient(150deg, var(--accent-dark) 0%, #1e40af 60%, var(--accent-mid) 100%);
  color: #fff; padding: 2.5rem 1.25rem 0; overflow: hidden;
}
.pm-hero-inner {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2rem; align-items: end;
}
/* Meșterul e înalt (de la cozoroc la centură); textul stă la mijlocul lui, nu
   lipit de marginea de jos. */
.pm-hero-text { align-self: center; padding: 1rem 0 2.5rem; }
.pm-eticheta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  background: rgba(255, 255, 255, 0.14); padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1rem;
}
.pm-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 1rem; }
.pm-lead { font-size: 1.08rem; line-height: 1.65; opacity: 0.92; margin-bottom: 1.5rem; max-width: 34rem; }
.pm-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* Meșterul decupat stă pe marginea de jos a fundalului, ca în reclamă: tăiat
   drept la centură, nu plutind. Umbra de sub el îl desprinde de degradeu. */
.pm-hero-mester {
  display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}
/* Pe desktop textul are lângă el un om înalt de ~650 px. Cu rândurile strânse
   ca pe telefon rămânea un bloc mic în mijlocul unui spațiu mare; aici
   respiră: titlu mai mare, aer între etichetă, titlu, text și butoane. */
@media (min-width: 768px) {
  .pm-eticheta { margin-bottom: 1.6rem; }
  .pm-hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.5rem); margin-bottom: 1.5rem; }
  .pm-lead { font-size: 1.18rem; line-height: 1.7; margin-bottom: 2.4rem; max-width: 36rem; }
}
@media (max-width: 767px) {
  .pm-hero-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .pm-hero-text { padding-bottom: 0.5rem; text-align: center; }
  .pm-lead { margin-left: auto; margin-right: auto; }
  .pm-actiuni { justify-content: center; }
  .pm-hero-mester { max-width: 250px; }
}
.pm-secundar { color: #fff; font-weight: 700; text-decoration: none; }
.pm-secundar:hover { color: #fff; text-decoration: underline; }
.pm-secundar i { margin-left: 0.3rem; font-size: 0.85em; }

/* Cele patru cuvinte de încredere din josul reclamei, pe aceeași bandă galbenă. */
.pm-incredere { background: var(--galben); color: var(--pe-galben); }
.pm-incredere-inner {
  max-width: 1040px; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
}
.pm-incredere-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.25;
}
.pm-incredere-item i { font-size: 1.3rem; }
@media (max-width: 767px) { .pm-incredere-inner { grid-template-columns: repeat(2, 1fr); } }

.pagina-mesteri section { margin-top: 2.5rem; }
.pm-titlu { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 0.5rem; }
.pm-sub { color: var(--muted); line-height: 1.6; margin-bottom: 1.25rem; }

.pm-beneficii-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 639px) { .pm-beneficii-lista { grid-template-columns: 1fr; } }
.pm-beneficiu { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.pm-beneficiu-icon {
  width: 48px; height: 48px; border-radius: 10px; margin-bottom: 0.85rem;
  background: var(--accent); color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.pm-beneficiu h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.4rem; line-height: 1.35; }
.pm-beneficiu p { font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

.pm-pasi .steps-row { max-width: 780px; }

.pm-cost, .pm-recenzii {
  background: var(--accent-light); border: 1px solid var(--accent-mid);
  border-radius: var(--radius); padding: 1.5rem;
}
.pm-cost p, .pm-recenzii p { line-height: 1.65; margin-bottom: 0.6rem; }
.pm-cost p:last-child { margin-bottom: 0; }
.pm-recenzii ul { margin: 0.5rem 0 0 1.2rem; line-height: 1.65; }
.pm-recenzii li { margin-bottom: 0.35rem; }

.pm-lucrari-mai-multe { display: inline-block; margin-top: 1rem; font-weight: 700; }
.pm-lucrari-mai-multe i { margin-left: 0.3rem; font-size: 0.85em; }

.pm-final {
  text-align: center; color: #fff;
  background: linear-gradient(150deg, var(--accent-dark) 0%, #1e40af 60%, var(--accent-mid) 100%);
  border-radius: var(--radius); padding: 2.5rem 1.5rem;
}
.pm-final h2 { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 0.5rem; }
.pm-final h2 strong { color: var(--galben); }
.pm-final p { opacity: 0.92; line-height: 1.6; margin-bottom: 1.25rem; }