*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #1a3fd0;
  --blue-dark: #0d2999;
  --navy: #0a1a6b;
  --bg: #e8edf8;
  --white: #ffffff;
  --text: #1a1a2e;
  --muted: #6b7280;
  --card-bg: #f0f4ff;
  --radius: 12px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

/* ── NAVBAR ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  padding: 0 40px;
  height: 64px;
}

.navbar .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

@media all and (min-width: 1900px) {
  .navbar .container {
    max-width: 1600px;
  }
}

.logo {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.logo span { color: var(--blue); font-size: 20px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  transition: color .2s;
}
.nav-links a:hover { color: var(--blue); }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
  display: inline-block;
}
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
  display: inline-block;
}
.btn-outline:hover { background: rgba(255,255,255,.15); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .3s;
}

/* ── HERO ── */
.hero {
  background: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
  height: 95vh;
}

@media all and (min-width: 1900px) {
  .hero {
    height: 82vh;
  }
}

.hero-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 100%;
}

.hero-text {
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

@media all and (max-width: 1360px) {
  .hero-text {
    padding-left: 40px;
  }
}

@media all and (max-width: 900px) {
  .hero-text {
   padding: 25px 0 25px 40px;
  }
}

@media all and (min-width: 1900px) {
  .hero-text {
   max-width: 1600px;
  }
}

.hero-text h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 12px;
}

@media all and (min-width: 1900px) {
  .hero-text h1 {
    font-size: 52px;
  }
}

.hero-text h1 span { color: var(--blue); }

.hero-text p {
  color: var(--muted);
  font-size: 18px;
  max-width: 400px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.booking-card {
  display: inline-block;
  max-width: 420px;
}
.booking-card p { font-weight: 600; margin-bottom: 14px; font-size: 14px; }

.booking-fields {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.field-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.field-pill .icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-pill .icon i { font-size: 15px; color: white; line-height: 1; }

.field-pill a {
  text-decoration: none;
}

.hero-image-wrap {
  flex: 1;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
  width: 50%;
}

@media all and (min-width: 1900px) {
  .hero-image-wrap {
    width: 56%;
  }
}

.hero-image-wrap::before {
  content: '';
  position: absolute;
  top: 0; 
  left: -50px;
  width: 45%;
  height: 100%;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 15%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

@media all and (min-width: 1900px) {
  .hero-image-wrap::before{
      background: linear-gradient(to right, #ffffff 0%, #ffffff 25%, transparent 100%);
  }
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 0 -80px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@media all and (min-width: 1900px) {
  .hero-image-wrap img {
    object-position: 0 -150px;
  }
}

@media all and (max-width: 900px) {
  .hero-image-wrap img{
    object-position: 0 0;
  }

  .navbar .btn-primary {
    display: none;
  }
}


.badge-float {
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  top: 20px;
  right: 10px;
}
.badge-float i { font-size: 30px; color: #e53e3e; }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--navy);
  color: white;
  padding: 28px 40px;
}
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-icon { font-size: 20px; opacity: .75; margin-bottom: 6px; display: block; }
.stat strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.stat span { font-size: 12px; opacity: .7; }

/* ── SECTIONS ── */
section { padding: 70px 40px; }

.section-inner { max-width: 1100px; margin: 0 auto; }

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 40px;
}

/* ── DESPRE ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.about-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26,63,208,.12);
  height: 380px;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-text h2 { font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.about-text p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.about-text .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin: 4px 4px 4px 0;
}

/* ── SERVICII ── */
#servicii { background: var(--white); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  border: 1.5px solid transparent;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,63,208,.12);
  border-color: #c7d4ff;
}
.service-icon {
  width: 52px;
  height: 52px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.service-icon i { font-size: 26px; color: white; line-height: 1; }
.service-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.service-card p { font-size: 16px; color: var(--muted); line-height: 1.6; }

/* ── PORTOFOLIU ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.portfolio-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .2s;
}
.portfolio-card:hover { transform: translateY(-4px); }
.portfolio-card-img {
  height: 180px;
  background: linear-gradient(135deg, #1a3fd0 0%, #0d2999 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36px;
}
.portfolio-card-body { padding: 18px; }
.portfolio-card-body h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.portfolio-card-body p { font-size: 16px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.portfolio-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.portfolio-tag {
  background: var(--bg);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
}

/* ── TESTIMONIALE ── */
#testimoniale { background: var(--white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  border: 1.5px solid #e0e8ff;
}
.testimonial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: 14px; }
.stars { color: #f59e0b; font-size: 13px; }
.testimonial-card p { font-size: 16px; color: var(--muted); line-height: 1.6; font-style: italic; }

/* ── CONTACT ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-info h2 { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.contact-item-icon {
  width: 40px;
  height: 40px;
  background: var(--card-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon i { font-size: 20px; color: var(--blue); line-height: 1; }
.contact-item-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.contact-item-text span { font-size: 16px; color: var(--muted); }

.map-placeholder {
  border-radius: var(--radius);
  overflow: hidden;
  height: 300px;
  background: var(--card-bg);
  border: 1.5px solid #e0e8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  flex-direction: column;
  gap: 10px;
}
.map-placeholder i { font-size: 44px; color: var(--blue); opacity: .5; }



/* ── FORM ── */
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1.5px solid #e0e8ff;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: white;
  outline: none;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--blue); }
.contact-form textarea { resize: vertical; min-height: 120px; }

/* ── CTA ── */
.cta-section {
  background: var(--blue);
  color: white;
  text-align: center;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,.08);
  top: -80px; right: -80px;
}
.cta-section::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,.06);
  bottom: -60px; left: -40px;
}
.cta-section h2 { font-size: 28px; font-weight: 700; margin-bottom: 0; position: relative; }

.phone-url {
  margin-top: 8px;
}

.phone-url a {
  color: #6b7280;
  text-decoration: none;
}

.phone-url a:hover {
  text-decoration: underline;
}

/* ── FOOTER ── */
footer {
  background: var(--white);
  padding: 50px 40px 30px;
  border-top: 1.5px solid #e5e7f0;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
.footer-brand .logo { margin-bottom: 12px; display: inline-flex; }
.footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--navy); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-col ul a:hover { color: var(--blue); }
.footer-col p { font-size: 13px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }

.social-row { display: flex; gap: 10px; margin-top: 14px; }
.social-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s;
}
.social-btn:hover { background: var(--blue); }
.social-btn:hover i { color: white; }
.social-btn i { font-size: 18px; color: var(--blue); transition: color .2s; }

.footer-bottom {
  max-width: 1100px;
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid #e5e7f0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: white;
  z-index: 99;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  flex-direction: column;
  gap: 16px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu a.btn-primary {
  color: var(--white)
}


/* ── ACCORDION TOGGLE ── */
.toggle-cursuri { margin-top: 20px; }
.accordion { border: 1px solid #c7d2e8; border-radius: var(--radius); overflow: hidden; }
.accordion-btn {
  width: 100%;
  background: var(--card-bg);
  border: none;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  gap: 10px;
  transition: background .2s;
}
.accordion-btn:hover { background: #dce4f7; }
.accordion-icon { transition: transform .3s; flex-shrink: 0; color: var(--blue); }
.accordion-btn[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: var(--white);
}
.accordion-body-inner { padding: 16px 20px; }
.accordion-body ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.accordion-body ol li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

/* ── FILTERABLE TIMELINE (horizontal) ── */
:root {
  --curs-color:    #1a3fd0;
  --curs-bg:       #e8edf8;
  --congres-color: #16a34a;
  --congres-bg:    #dcfce7;
  --ws-color:      #b45309;
  --ws-bg:         #fef3c7;
}

#cursuri-section {
  background: var(--bg);
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}
#cursuri-section .section-inner { padding: 0 40px; }

.tl-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 7px 20px;
  border-radius: 20px;
  border: 1.5px solid #d1d5db;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.filter-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.filter-btn[data-filter="all"].active     { background: var(--navy);          border-color: var(--navy);          color: #fff; }
.filter-btn[data-filter="curs"].active    { background: var(--curs-color);    border-color: var(--curs-color);    color: #fff; }
.filter-btn[data-filter="congres"].active { background: var(--congres-color); border-color: var(--congres-color); color: #fff; }
.filter-btn[data-filter="workshop"].active{ background: var(--ws-color);      border-color: var(--ws-color);      color: #fff; }

/* Outer wrapper — no overflow:hidden so scroll is never trapped */
.tl-outer { position: relative; margin-top: 36px; }

/* Right-edge fade gradient — disappears once user has scrolled to end */
.tl-outer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  z-index: 3;
  transition: opacity .4s;
}
.tl-outer.tl-end::after { opacity: 0; }

.tl-scroll-hint {
  position: absolute;
  right: 14px;
  bottom: 26px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 4;
  pointer-events: none;
  transition: opacity .4s;
}
.tl-outer.tl-end .tl-scroll-hint { opacity: 0; }

/* Scrollable strip */
.tl-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.tl-scroll-wrap::-webkit-scrollbar       { height: 4px; }
.tl-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.tl-scroll-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.tl-scroll-wrap { cursor: grab; }
.tl-scroll-wrap.dragging { cursor: grabbing; user-select: none; }

/* Fixed-height track */
.tl-track {
  position: relative;
  min-width: 3300px;
  height: 440px;
}

/* Horizontal axis line */
.tl-axis {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: #e0e0e0;
  transform: translateY(-50%);
}

/* Flex row of events */
.tl-events {
  display: flex;
  height: 100%;
  padding: 0 100px;
  align-items: stretch;
}

/* Single event slot (90 px wide) */
.tl-event {
  flex: 0 0 90px;
  position: relative;
  height: 100%;
  transition: opacity .25s ease;
}
.tl-event.faded { opacity: 0.18; }

/* Dot on the axis */
.tl-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  z-index: 2;
}
.tl-dot.curs     { background: var(--curs-color); }
.tl-dot.congres  { background: var(--congres-color); }
.tl-dot.workshop { background: var(--ws-color); }

/* Connector — 40 px, colored, semi-transparent */
.tl-connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
}
.tl-connector.curs     { background: var(--curs-color);    opacity: .45; }
.tl-connector.congres  { background: var(--congres-color); opacity: .45; }
.tl-connector.workshop { background: var(--ws-color);      opacity: .45; }

/* ABOVE: connector bottom flush with dot top; card above connector */
.tl-event.above .tl-connector { bottom: calc(50% + 6px); }
.tl-event.above .tl-card      { bottom: calc(50% + 46px); }

/* BELOW: connector top flush with dot bottom; card below connector */
.tl-event.below .tl-connector { top: calc(50% + 6px); }
.tl-event.below .tl-card      { top: calc(50% + 46px); }

/* Label card */
.tl-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  text-align: center;
}

.tl-year-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 3px;
  line-height: 1;
}

.tl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tl-badge.curs     { background: var(--curs-bg);    color: var(--curs-color); }
.tl-badge.congres  { background: var(--congres-bg); color: var(--congres-color); }
.tl-badge.workshop { background: var(--ws-bg);      color: var(--ws-color); }

.tl-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 3px;
}

.tl-location {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.tl-location i { font-size: 9px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .navbar { padding: 0 20px; }
  .nav-links, .navbar > .btn-primary { display: none; }
  .hamburger { display: flex; }

  
  .hero-inner {
    flex-direction: column;
    gap: 0;
  }
  .hero-image-wrap { order: -1; flex: 0 0 50%; width: 100%; position: relative;}
  .hero-image-wrap::before { display: none; }
  .hero-text { flex: 1; width: 100%; text-align: center; align-items: center; padding-left: 20px; padding-right: 20px; }
  .hero-text > p[style*="display:flex"] { justify-content: center; }
  .hero-text p { max-width: 100%; }
  .booking-card { width: 100%; max-width: 100%; }
  .booking-fields { flex-direction: column; align-items: stretch; gap: 8px; }
  .booking-fields .field-pill { justify-content: center; width: auto; }
  .hero-text h1 { font-size: 28px; }
  .hero-circle { width: 260px; height: 260px; }

  .stats-bar { padding: 24px 20px; }

  .stat {
    width: 100%;
  }
  section { padding: 50px 20px; }

  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-img { height: 260px; }

  .services-grid,
  .portfolio-grid,
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }

  footer { padding: 40px 20px 20px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .map-placeholder iframe {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .services-grid,
  .portfolio-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner { grid-template-columns: 1fr; }
  .booking-fields { flex-direction: column; align-items: center; }
  .hero-text h1 { font-size: 24px; }
}

/* ── MEDIA SWIPER ── */
.media-section { background: var(--white); }

.media-swiper {
  width: 100%;
  max-width: 100%;
  margin-top: 32px;
  border-radius: 12px;
  overflow: hidden;
}

.media-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4ff;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 250px;
}

.media-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-swiper .swiper-button-prev,
.media-swiper .swiper-button-next {
  color: var(--white);
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  backdrop-filter: blur(4px);
}

.media-swiper .swiper-button-prev::after,
.media-swiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.media-swiper .swiper-pagination-bullet-active {
  background: var(--blue);
}

.media-swiper .swiper-pagination {
  bottom: 12px;
}

.media-empty {
  text-align: center;
  color: #999;
  font-size: 15px;
  margin-top: 24px;
}

.media-swiper .swiper-slide img { cursor: pointer; }

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
}
.lb-img {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
  transition: opacity .2s;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.28); }
.lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 20px; }
.lb-prev  { left: 20px;  top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 18px; }
.lb-next  { right: 20px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPLETĂRI SEO / ACCESIBILITATE / FORMULAR — adăugate 2026-08-02
   Blocul este plasat la finalul fișierului ca să nu interfereze cu regulile
   existente și ca să poată fi identificat ușor la o revizuire ulterioară.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Text ascuns vizual, dar citit de cititoarele de ecran ──
   Folosit pentru etichetele <label> ale formularului, care altfel ar dubla
   vizual textele din placeholder. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Hero ── */
.hero-eyebrow {
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Numele rămâne elementul dominant vizual; subtitlul adaugă în H1 termenii
   după care caută pacienții („chirurg", „Cluj-Napoca"), fără să încarce
   designul. <em> este folosit ca element de linie, nu ca text italic. */
.hero-text h1 span {
  display: block;
  text-transform: uppercase;
}
.hero-text h1 em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  opacity: .82;
}
@media all and (min-width: 1900px) {
  .hero-text h1 em { font-size: 22px; }
}
@media all and (max-width: 600px) {
  .hero-text h1 em { font-size: 16px; }
}

/* ── Bara de statistici: numerele sunt acum link-uri tel:/mailto: ── */
.stat a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.stat a:hover { border-bottom-color: currentColor; }

/* Adresele de e-mail sunt lungi — le micșorăm ca să nu rupă bara. */
.stat strong a[href^="mailto:"] { font-size: 13px; word-break: break-all; }

/* ── Preț evidențiat în secțiunea Gastric Sleeve ── */
.price-line strong {
  display: inline-block;
  background: var(--card-bg);
  color: var(--navy);
  border: 1.5px solid #c3cff0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 17px;
}

/* ── Formular de contact ── */

/* Capcana anti-spam. Ascunsă complet: nu ocupă spațiu, nu poate fi
   focalizată cu Tab și nu este anunțată de cititoarele de ecran. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bifa de acord GDPR.
   Regula generală „.contact-form input { width:100% }" transforma checkbox-ul
   într-o bandă lată cât formularul, iar eticheta era împinsă dedesubt — de
   aceea bifa apărea DEASUPRA textului. Aici o readucem la dimensiune normală
   și o așezăm pe același rând cu textul, care curge în dreapta ei.

   Bifa este obligatorie (temeiul legal al prelucrării), deci trebuie să fie
   ușor de observat: are casetă proprie, contur și dimensiune mărită. */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--card-bg);
  border: 1.5px solid #c3cff0;
  border-radius: 8px;
  padding: 14px 16px;
}
.contact-form .form-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--blue);
}
.form-consent label {
  cursor: pointer;
}
.form-consent a { color: var(--blue); font-weight: 600; }

/* Când bifa este completată, caseta devine verde discret — confirmare vizuală
   că formularul poate fi trimis. */
.form-consent:has(input[type="checkbox"]:checked) {
  background: #e7f6ec;
  border-color: #b7e2c5;
}

.form-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: -4px 0 0;
}
.form-note a { color: var(--blue); font-weight: 600; }

/* Mesajul de confirmare / eroare afișat sub buton. Ascuns până când
   primește o clasă de stare din js/main.js. */
.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
.form-status.is-ok {
  display: block;
  background: #e7f6ec;
  border: 1px solid #b7e2c5;
  color: #14663a;
}
.form-status.is-error {
  display: block;
  background: #fdecec;
  border: 1px solid #f5c2c2;
  color: #9b1c1c;
}

/* ── Hartă Google Maps ──
   Regula originală (linia ~523) face din .map-placeholder un container flex
   cu align-items:center și justify-content:center. Acele două proprietăți
   centrau iframe-ul la dimensiunea lui implicită (300×150 px), lăsând în jur
   spațiu gri — harta apărea „mică, în mijlocul casetei".

   Nu ne bazăm pe subtilitățile flexbox pentru un element înlocuit (iframe):
   anulăm complet contextul flex cu display:block. Astfel iframe-ul este un
   simplu bloc care umple exact caseta, previzibil în toate browserele. */
.map-placeholder {
  display: block;
  padding: 0;
  gap: 0;
  height: 340px;
}
.map-placeholder iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDURI DE SERVICIU CLICABILE ÎN ÎNTREGIME

   Titlul rămâne singurul <a> real din card, dar primește un strat invizibil
   (::after) care acoperă tot cardul. Rezultatul: se poate face clic oriunde pe
   card, exact ca pe un buton mare — util mai ales pe telefon, unde un titlu de
   15px este o țintă prea mică.

   De ce această metodă și nu altele:
    • NU învelim tot cardul într-un <a>, pentru că unele carduri conțin deja
      legături (vezi .service-links de la Chirurgie Bariatrică), iar un <a> în
      interiorul altui <a> este HTML invalid și browserul îl rupe.
    • NU folosim JavaScript, pentru că un card făcut clicabil din JS nu apare
      ca legătură nici pentru Google, nici pentru cititoarele de ecran.

   Așa, în arborele de accesibilitate rămâne o singură legătură, cu text
   descriptiv — corect atât pentru SEO, cât și pentru navigarea cu tastatura.
   ═══════════════════════════════════════════════════════════════════════════ */
.service-card {
  position: relative;
}

.service-card h3 a {
  color: inherit;
  text-decoration: none;
}
.service-card h3 a:hover { color: var(--blue); }

/* Stratul invizibil care extinde zona de clic peste tot cardul. */
.service-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  z-index: 1;
}

/* Legăturile suplimentare (Gastric sleeve / Bypass / Minimizer Ring) trebuie
   să rămână DEASUPRA stratului de mai sus, altfel ar fi acoperite de el și
   nu s-ar mai putea apăsa. */
.service-links {
  position: relative;
  z-index: 2;
  margin-top: 10px !important;
  font-size: 13.5px;
  font-weight: 600;
}
.service-links a { color: var(--blue); text-decoration: none; }
.service-links a:hover { text-decoration: underline; }

/* Aceeași evidențiere ca la hover, atunci când cardul este atins cu tasta Tab.
   Fără asta, utilizatorul care navighează de la tastatură ar vedea conturul
   doar în jurul titlului, nu al cardului pe care urmează să îl deschidă. */
.service-card:has(h3 a:focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,63,208,.12);
  border-color: #c7d4ff;
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}