/* ==========================================================================
   Um Sérefni — Page-specific CSS
   Loaded only on /um-serefni/ via functions.php conditional enqueue.
   All measurements extracted from live serefni.is via JS inspection.
   ========================================================================== */

/* Allow hero logo to overflow below without being clipped */
body.page-id-121 .site-content {
  overflow: visible !important;
}

/* ── HERO ── */

.ser-info-hero--um-serefni {
  background: transparent !important;
  position: relative;
  min-height: 450px;
  overflow: visible !important;
}

/* Grey bg covering ~70% from left, extends to screen edge */
.ser-info-hero--um-serefni::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * (50vw - 50%));
  width: calc(70% + (50vw - 50%));
  background: #999a97;
  z-index: 0;
}

/* Gutenberg inner container = flex row */
.ser-info-hero--um-serefni > .wp-block-group__inner-container,
.ser-info-hero--um-serefni > .wp-block-group__inner-container.wp-block-group__inner-container {
  display: flex !important;
  align-items: stretch;
  position: relative;
  min-height: 450px;
  width: 100%;
}

/* Left content area: H1 at bottom-left */
.ser-info-hero--um-serefni .ser-info-hero__content,
.ser-info-hero--um-serefni .ser-info-hero__content.wp-block-group {
  position: relative;
  z-index: 1;
  flex: 0 0 55% !important;
  max-width: 55% !important;
  display: flex !important;
  align-items: flex-end;
  padding: 0 40px 67px 80px !important;
}

.ser-info-hero--um-serefni .ser-info-hero__content > .wp-block-group__inner-container,
.ser-info-hero--um-serefni .ser-info-hero__content > .wp-block-group__inner-container.wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important;
}

/* H1: white, 62px ivypresto-display — exact match to live */
.ser-info-hero--um-serefni h1,
.ser-info-hero--um-serefni h1.wp-block-heading,
.ser-info-hero--um-serefni .wp-block-heading {
  color: #fff !important;
  font-family: "ivypresto-display", serif !important;
  font-size: 62px !important;
  font-weight: 500 !important;
  letter-spacing: 1.7px !important;
  line-height: 80px !important;
  margin: 0 !important;
}

/* Logo: absolutely positioned, overflowing 100px below hero bottom */
.ser-info-hero--um-serefni .ser-info-hero__image,
.ser-info-hero--um-serefni .ser-info-hero__image.wp-block-group {
  position: absolute !important;
  z-index: 1;
  right: 9%;
  top: 127px;
  width: 38%;
  height: auto;
  max-width: none !important;
  overflow: visible !important;
  flex: none !important;
  padding: 0 !important;
}

.ser-info-hero--um-serefni .ser-info-hero__image > .wp-block-group__inner-container {
  height: auto;
  padding: 0 !important;
}

.ser-info-hero--um-serefni .ser-info-hero__image .wp-block-image,
.ser-info-hero--um-serefni .ser-info-hero__image figure {
  margin: 0 !important;
  height: auto;
}

.ser-info-hero--um-serefni .ser-info-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── TEXT SECTION ── */

.ser-info-section--um-serefni,
.ser-info-section--um-serefni.wp-block-group {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 100px 15px 40px !important;
}

.ser-info-section--um-serefni > .wp-block-group__inner-container {
  padding: 0 !important;
  max-width: none !important;
}

/* Text group: CSS column-count: 2 for flowing 2-column layout */
.ser-info-section--um-serefni .ser-info-text,
.ser-info-section--um-serefni .ser-info-text.wp-block-group {
  padding: 0 !important;
}

.ser-info-section--um-serefni .ser-info-text > .wp-block-group__inner-container,
.ser-info-section--um-serefni .ser-info-text > .wp-block-group__inner-container.wp-block-group__inner-container {
  column-count: 2 !important;
  column-gap: 40px;
  padding: 0 !important;
}

/* Paragraphs: granville 15px/30px #484848 — exact match to live */
.ser-info-section--um-serefni p,
.ser-info-section--um-serefni .wp-block-paragraph {
  font-family: granville, serif !important;
  font-size: 15px !important;
  line-height: 30px !important;
  color: #484848 !important;
  margin: 0 0 10px !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .ser-info-hero--um-serefni .ser-info-hero__image {
    width: 35%;
    right: 2%;
  }
  .ser-info-hero--um-serefni h1 {
    font-size: 48px !important;
  }
}

@media (max-width: 768px) {
  .ser-info-hero--um-serefni {
    min-height: 300px;
  }
  .ser-info-hero--um-serefni > .wp-block-group__inner-container,
  .ser-info-hero--um-serefni > .wp-block-group__inner-container.wp-block-group__inner-container {
    min-height: 300px;
  }
  .ser-info-hero--um-serefni::before {
    width: calc(100% + (50vw - 50%)) !important;
  }
  .ser-info-hero--um-serefni .ser-info-hero__content,
  .ser-info-hero--um-serefni .ser-info-hero__content.wp-block-group {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 40px 20px 40px !important;
  }
  .ser-info-hero--um-serefni .ser-info-hero__image {
    display: none !important;
  }
  .ser-info-hero--um-serefni h1 {
    font-size: 36px !important;
  }
  .ser-info-section--um-serefni,
  .ser-info-section--um-serefni.wp-block-group {
    padding: 40px 15px !important;
  }
  .ser-info-section--um-serefni .ser-info-text > .wp-block-group__inner-container,
  .ser-info-section--um-serefni .ser-info-text > .wp-block-group__inner-container.wp-block-group__inner-container {
    column-count: 1 !important;
  }
}

/* Match live: let ser-info-text fill section so 2 columns are ~535px wide */
body.page-id-121 .ser-info-section--um-serefni .ser-info-text {
  max-width: none !important;
  width: 100%;
}