/**
 * SectionBottom — Întrebări frecvente
 * Figma: Desktop 610:3212 / Tablet 610:3232 / Mobile 610:3252
 *
 * Markup (partials/bottom-column.html.twig):
 *   .asp-bottom-column__heading--mob  (doar ≤991px)
 *   .asp-bottom-column__content       (FAQ)
 *   .asp-bottom-column__sidebar       (heading desktop + card)
 */

.asp-bottom-column {
  padding-block: var(--spacing-40);
  background: var(--white);
}

/* Desktop: 1fr | 2fr — coloanele pe grid-column (independente de ordinea DOM) */
.asp-bottom-column__inner {
  display: grid;
  grid-template-columns: 426px minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
  row-gap: var(--spacing-40);
}

/* Titlu duplicat — ascuns pe desktop (specificitate > .heading) */
.asp-bottom-column__heading.asp-bottom-column__heading--mob {
  display: none;
}

/* ── Stânga: heading + contact (bottom_first) ── */
.asp-bottom-column__sidebar {
    width: 384px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.asp-bottom-column__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
  max-width: 384px;
}

.asp-bottom-column__title {
  font-family: var(--font-family-base);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: var(--color-text-base-secondary, #383838);
  margin: 0;
  padding-top: var(--spacing-32);
}

.asp-bottom-column__subtitle {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-base-secondary, #383838);
  margin: 0 0 40px;
}

/* Card contact — Figma: bg secondary, p-16, gap-24, radius-16 */
.asp-bottom-column__contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  width: 100%;
  padding: var(--spacing-24);
  background: var(--color-background-base-secondary, #f5f5f5);
  border-radius: var(--border-radius-16);
  color: var(--color-text-base-secondary, #383838);
}

.asp-bottom-column__contact-title {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--color-text-base-secondary, #383838);
  margin: 0;
}

.asp-bottom-column__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.asp-bottom-column__contact-item {
  margin: 0;
}

.asp-bottom-column__contact-label {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-text-base-secondary, #383838);
  margin: 0;
}

.asp-bottom-column__contact-value {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-base-secondary, #383838);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asp-bottom-column__contact-value:hover {
  color: var(--color-brand-primary);
}
.asp-bottom-column__contact-value--plain {
  font-weight: 400;
  text-decoration: none;
}

/* ── Dreapta: accordion + CTA (bottom_second) ── */
.asp-bottom-column__content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
  align-self: start;
}

.asp-bottom-column__cta,
.asp-bottom-column__content > .block:last-child,
.asp-bottom-column__content .more-link,
.asp-bottom-column__content .views-more-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 72px;
  width: 100%;
}

/* ============================================================
 * TABLET / MOBILE
 * DOM: heading--mob → FAQ → sidebar(card)
 * ============================================================ */
@media (max-width: 991px) {
  .asp-bottom-column__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
  }

  /* Arată titlul mobil; ascunde pe cel din sidebar (rămâne doar cardul) */
  .asp-bottom-column__heading.asp-bottom-column__heading--mob {
    display: flex;
    max-width: none;
  }
  .asp-bottom-column__sidebar .asp-bottom-column__heading {
    display: none;
  }

  .asp-bottom-column__sidebar {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 0;
    align-items: stretch; /* card pe toată lățimea — nu shrink pe conținut */
  }
  .asp-bottom-column__sidebar .block,
  .asp-bottom-column__sidebar .field,
  .asp-bottom-column__sidebar .field__item {
    width: 100%;
    max-width: 100%;
  }
  .asp-bottom-column__content {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
  .asp-bottom-column__contact-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .asp-bottom-column__cta,
  .asp-bottom-column__content > .block:last-child,
  .asp-bottom-column__content .more-link,
  .asp-bottom-column__content .views-more-link {
    justify-content: flex-start;
    min-height: 72px;
  }
}

@media (max-width: 767px) {
  .asp-bottom-column__cta,
  .asp-bottom-column__content > .block:last-child,
  .asp-bottom-column__content .more-link,
  .asp-bottom-column__content .views-more-link {
    min-height: 48px;
  }

  .asp-bottom-column__content .btn {
    width: 100%;
    justify-content: center;
  }
}