/* Contacts blocks in the standard Content region of page.html.twig.
 * Scope by rendered block placements, independent of the page URL, ID or language.
 * Dimensions retained from Figma 371:314 / 394:541 / 394:675.
 */
.section--contacts > #block-nedelska-content {
  grid-column: 1 / -1;
}
/* The existing Contacts node has no body.
 * Avoid an empty grid row; keep any future fields visible.
 */
.section--contacts > #block-nedelska-content:not(:has(.field)) {
  display: none;
}
.section--contacts > .block-page-title-block {
  grid-area: title;
  margin-bottom: 20px;
}
/* Expose the unified block's details and map to the existing page grid.
 * Webform remains a separate sibling Drupal block. */
.contacts-page__layout { display: contents; }
.main--contacts {
  padding-block: 60px 64px;
}
.section--contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(50%, 516px));
  grid-template-areas: "title title" "details form" "map map";
  column-gap: 42px;
  row-gap: 36px;
  align-items: start;
}
.section--contacts > .block-page-title-block h1 {
  margin: 0;
  text-align: center;
  font: 400 40px/30px var(--font-heading);
}
/* Contact details */
.contacts-page__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 592px;
}
.contacts-page__detail {
  min-width: 0;
}
.contacts-page__detail h2 {
  margin: 0 0 12px;
  font: 400 24px/24px var(--font-heading);
}
.contacts-page__detail p {
  margin: 0;
  max-width: 530px;
  font: 400 16px/32px var(--font-body);
  overflow-wrap: anywhere;
  text-align: left;
}
.contacts-page__detail a {
  color: var(--text-color);
  text-decoration: none;
}
/* Underline only regular text links, not messenger buttons. */
.contacts-page__detail p a:hover {
  text-decoration: underline;
}
/* Messengers */
.contacts-page__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contacts-page__social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 11px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  font: 400 16px/32px var(--font-body);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contacts-page__social-link:hover {
  border-color: var(--text-color);
  background-color: var(--service-bg);
  text-decoration: none;
}
.contacts-page__social-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  text-decoration: none;
}
.contacts-page__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  font: 700 14px/20px var(--font-body);
  color: var(--color-white);
}
.contacts-page__social-icon--whatsapp {
  background: var(--color-whatsapp);
}
.contacts-page__social-icon--telegram {
  background: var(--color-telegram);
}
.contacts-page__social-icon--vk {
  background: var(--color-vk);
}
/* Contact form placement. */
#block-nedelska-contacts-form {
  grid-area: form;
  min-width: 0;
  padding: 16px;
  background: var(--service-bg);
  border-radius: var(--radius-panel);
}
#block-nedelska-contacts-form h2 {
  margin: 0 0 16px;
  font: 400 24px/30px var(--font-heading);
}
/* Map */
.contacts-page__map {
  position: relative;
  grid-area: map;
  min-width: 0;
  height: 341px;
  overflow: hidden;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  background: var(--region-bg);
}
.contacts-page__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1);
}
.contacts-page__map-link {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-white);
  color: var(--text-color);
  font: 400 12px/20px var(--font-body);
}
/* Tablet */
@media (min-width: 768px) and (max-width: 959.98px) {
  .section--contacts > .block-page-title-block {
    margin-bottom: 28px;
  }
}
@media (max-width: 959.98px) {
  .section--contacts {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "details" "map" "form";
    gap: 28px;
  }
  .contacts-page__details {
    max-width: none;
  }
}
/* Mobile */
@media (max-width: 767.98px) {
  .main--contacts {
    padding-block: 24px;
  }
  .section--contacts > .block-page-title-block {
    margin-bottom: 0;
  }
  .section--contacts > .block-page-title-block h1 {
    margin-bottom: 0;
    font-size: 28px;
    line-height: 30px;
  }
  .contacts-page__map {
    height: 245px;
  }
}
/* Narrow mobile */
@media (max-width: 480px) {
  .contacts-page__social {
    flex-direction: column;
  }
}