/* ============================================================================
   mediweb-landing.css — corpul paginii principale (29.07.2026)

   Se încarcă DOAR pe pagina principală, după styles.css și mediweb-ui.css.
   Cuprinde: fundalul paginii, hero-ul cu căutare live, cei trei pași,
   cardurile de specialități și banda de scurtături de la final.

   Selectorii pornesc de la `body.pp-home` acolo unde trebuie să învingă
   regulile vechi din styles.css (`.registration-form`, `.hero`, `h3`).
   ============================================================================ */

body.pp-home { background: #f1f5f9; }

/* Cutia albă din styles.css nu-și mai are rostul: pe pagina principală
   conținutul stă direct pe fundal, iar cardurile sunt cele albe. */
body.pp-home section.registration-form.pp-landing {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 16px;
  width: min(1160px, 100%);
  margin: 0 auto;
}

/* ----------------------------------------------------------- hero + căutare */
body.pp-home .pp-hero {
  background: linear-gradient(135deg, #1c7ed6 0%, #1560ab 100%);
  color: #fff;
  padding: 46px 16px 90px;
  text-align: center;
  position: relative;
  /* NU punem overflow:hidden — lista de rezultate a căutării coboară sub
     marginea hero-ului și ar fi tăiată. Elementul decorativ de mai jos se
     limitează singur prin clip-path, deci nu are nevoie de decupare. */
}
/* „valul” alb care face trecerea către fundalul paginii */
body.pp-home .pp-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 44px;
  background: #f1f5f9;
  clip-path: ellipse(75% 100% at 50% 100%);
}
body.pp-home .pp-hero h1 { font-size: 2rem; margin: 0 0 8px; color: #fff; line-height: 1.25; }
body.pp-home .pp-hero p  { opacity: .93; max-width: 640px; margin: 0 auto 22px; font-size: 1rem; line-height: 1.5; }

/* ATENȚIE la z-index aici: `position:relative` + `z-index` fac din .pp-searchbox
   un context de stivuire, adică z-index-ul rezultatelor de dedesubt se compară
   DOAR între frații din interior. Față de restul paginii contează exclusiv
   valoarea de pe .pp-searchbox — de aceea trebuie să fie peste .pp-steps (6),
   altfel rezultatele căutării apar în spatele cardurilor cu cei trei pași. */
.pp-searchbox { max-width: 560px; margin: 0 auto; position: relative; text-align: left; z-index: 30; }
.pp-search {
  display: flex; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.pp-search input {
  flex: 1; min-width: 0; border: 0; padding: 15px 18px;
  font-size: 1rem; font-family: inherit; outline: none; color: #334155; background: #fff;
  /* anulăm regula veche .registration-form input[type=text] {max-width:300px} */
  max-width: none; margin: 0; border-radius: 0;
}
.pp-search button {
  border: 0; background: #0ea5e9; color: #fff; font-weight: 700;
  padding: 0 22px; cursor: pointer; font-size: 1rem; font-family: inherit; white-space: nowrap;
}
.pp-search button:hover { background: #0284c7; }

/* lista de rezultate, sub casetă */
.pp-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2);
  overflow: hidden auto; display: none; z-index: 60; max-height: 60vh; text-align: left;
}
.pp-results.show { display: block; }
.pp-res {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  text-decoration: none; color: #334155; border-bottom: 1px solid #f1f5f9;
}
.pp-res:last-child { border-bottom: 0; }
.pp-res:hover, .pp-res:focus { background: #f0f9ff; outline: none; }
.pp-res .ri {
  width: 38px; height: 38px; border-radius: 50%; background: #eff6ff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto;
}
.pp-res b { display: block; color: #1e293b; font-size: .95rem; }
.pp-res small { color: #64748b; font-size: .82rem; }
.pp-res mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.pp-res .tag {
  margin-left: auto; font-size: .72rem; font-weight: 700; color: #0369a1;
  background: #e0f2fe; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.pp-rescat {
  padding: 8px 16px 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #94a3b8; background: #fafbfc;
}
.pp-nores { padding: 16px; color: #64748b; font-size: .9rem; line-height: 1.5; }
.pp-nores b { color: #1e293b; }
.pp-sugg { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-sugg span {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 5px 11px; font-size: .82rem; cursor: pointer; color: #0369a1; font-weight: 600;
}
.pp-sugg span:hover { background: #e0f2fe; }

/* ------------------------------------------------------------- cei trei pași */
.pp-steps {
  max-width: 1000px; margin: -52px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; padding: 0 16px; position: relative; z-index: 6;
}
.pp-step {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
  display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 4px 14px rgba(0,0,0,.07);
}
.pp-step .n {
  width: 34px; height: 34px; border-radius: 50%; background: #0ea5e9; color: #fff;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: 1.05rem;
}
.pp-step b { display: block; color: #1e293b; margin-bottom: 2px; font-size: .95rem; }
.pp-step small { color: #64748b; line-height: 1.4; display: block; }

/* --------------------------------------------- locații + carduri specialități */
body.pp-home .pp-lochead {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px;
}
body.pp-home .pp-lochead h2 { color: #1e293b; font-size: 1.25rem; margin: 0; }
body.pp-home .pp-lochead .addr { color: #64748b; font-size: .88rem; display: inline; margin: 0; }
body.pp-home .pp-lochead .maplink { font-size: .82rem; color: #0369a1; text-decoration: none; font-weight: 600; white-space: nowrap; }
body.pp-home .pp-lochead .maplink:hover { text-decoration: underline; }

.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pp-sec {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 16px 16px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s; position: relative;
  text-decoration: none; color: #334155; display: block;
}
.pp-sec:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.pp-sec .ico {
  width: 62px; height: 62px; border-radius: 50%; background: #eff6ff;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 10px;
}
.pp-sec .ico img { width: 38px; height: 38px; object-fit: contain; }
.pp-sec b { display: block; color: #1e293b; font-size: 1.02rem; line-height: 1.3; }
.pp-sec .meta { color: #64748b; font-size: .83rem; margin: 4px 0 12px; }
.pp-sec .cta {
  display: inline-block; background: #0ea5e9; color: #fff; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; font-size: .88rem;
}
.pp-sec:hover .cta { background: #0284c7; }
/* Eticheta de disponibilitate stă în rândul ei, deasupra iconiței.
   În macheta inițială era în colțul cardului, dar textele reale
   („Disponibil din 18 aug.”) sunt prea late pentru colț și se suprapuneau
   peste iconiță la lățimile obișnuite ale cardului. */
.pp-sec .avail {
  display: inline-block; margin: 0 0 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
  font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  line-height: 1.4; white-space: nowrap;
}
.pp-sec .avail.full { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
/* cardurile fără etichetă păstrează aceeași înălțime cu cele cu etichetă */
.pp-sec:not(.are-eticheta)::before {
  content: ""; display: block; height: 23px; margin-bottom: 10px;
}

/* -------------------------------------------------------- bandă de scurtături */
.pp-infobar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 36px 0 8px;
}
.pp-ib {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
  display: flex; gap: 12px; align-items: center;
}
.pp-ib .e { font-size: 1.6rem; flex: 0 0 auto; }
.pp-ib b { display: block; color: #1e293b; font-size: .95rem; }
.pp-ib small { color: #64748b; }
.pp-ib a { color: #0369a1; text-decoration: none; font-weight: 600; }
.pp-ib a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- ecrane mici */
@media (max-width: 620px) {
  body.pp-home .pp-hero { padding: 34px 14px 82px; }
  body.pp-home .pp-hero h1 { font-size: 1.5rem; }
  body.pp-home .pp-hero p { font-size: .93rem; margin-bottom: 18px; }
  .pp-search input { padding: 13px 14px; font-size: .95rem; }
  .pp-search button { padding: 0 16px; font-size: .93rem; }
  .pp-steps { margin-top: -46px; }
  .pp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pp-sec { padding: 14px 10px 14px; }
  .pp-sec .ico { width: 52px; height: 52px; font-size: 1.5rem; }
  .pp-sec b { font-size: .92rem; }
  .pp-sec .meta { font-size: .76rem; }
  .pp-sec .avail { font-size: .66rem; padding: 3px 7px; margin-bottom: 8px; }
  .pp-sec:not(.are-eticheta)::before { height: 21px; margin-bottom: 8px; }
}
/* sub ~330px două coloane devin prea înguste pentru denumirile lungi */
@media (max-width: 330px) {
  .pp-grid { grid-template-columns: 1fr; }
}