/* =========================================================
   Arte - Hotelveggfodur
   Image-card grid built on the existing ser-staff-* pattern.

   NOTE: Woostify is a classic theme, so core/group blocks render an
   extra <div class="wp-block-group__inner-container"> between the
   group and its children. The grid therefore has to be applied to
   that inner wrapper - applying it to .ser-staff-grid itself only
   ever lays out one child. Both markup variants are handled below.

   LIVE VERSION. Three differences from the dev file, each marked
   LIVE CHANGE below:
     1. body.page-id-101969 -> body.serefni-arte (dev ID is not valid here)
     2. :not(.ser-pattern-intro) added to that same rule
     3. the 1280px breakpoint moved above 1024 and 640
   ========================================================= */

/* --- Intro copy ------------------------------------------------ */
.ser-info-lead {
  max-width: 60ch;
  font-size: 1.1rem;
  line-height: 1.6;
}

.ser-info-specs {
  margin: 1.25rem 0 1.5rem;
  padding-left: 1.1rem;
  line-height: 1.7;
}

/* --- Grid ------------------------------------------------------ */
/* classic-theme markup (inner container present) */
.ser-staff-grid--media > .wp-block-group__inner-container,
/* block-theme markup (no inner container) */
.ser-staff-grid--media:not(:has(> .wp-block-group__inner-container)) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 1.5rem !important;
  row-gap: 2.5rem !important;
  align-items: stretch !important;   /* equal-height cards */
  margin-top: 2.5rem;
}

/* neutralise any inherited flex/float/width sizing on the cards */
.ser-staff-grid--media .ser-staff-card {
  min-width: 0;
  max-width: none;
  width: auto;
  float: none;
  flex: none;
  margin: 0 !important;
  padding: 0;
  height: 100%;                       /* fill the grid row */
  box-sizing: border-box;
  overflow: hidden;
}

/* the card's own inner container must not shrink-wrap either */
.ser-staff-card--media > .wp-block-group__inner-container {
  display: block;
  height: 100%;
}

/* --- Image ----------------------------------------------------- */
.ser-staff-card__media {
  margin: 0 !important;
}

.ser-staff-card__media a {
  display: block;
}

.ser-staff-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .35s ease;
}

.ser-staff-card--media:hover .ser-staff-card__media img {
  transform: scale(1.03);
}

/* --- Caption (centered, spaced below image) -------------------- */
.ser-staff-card--media .ser-staff-card__name,
.ser-staff-card--media h3.ser-staff-card__name {
  margin: 0 !important;
  padding: 1.1rem .5rem 0;
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: center;
}

.ser-staff-card--media .ser-staff-card__name a {
  text-decoration: none;
  color: inherit;
}

.ser-staff-card--media .ser-staff-card__name a:hover {
  text-decoration: underline;
}

/* =========================================================
   Arte - single pattern sub-pages (children of arte-hotelveggfodur)
   Reuses the ser-info-hero / ser-info-text / ser-staff-card vocabulary.
   ========================================================= */

/* --- Hero: dark band on the left, pattern image on the right --- */
.ser-info-hero--pattern .ser-info-hero__image,
.ser-info-hero--pattern .ser-info-hero__image.wp-block-group {
  position: relative;
  z-index: 1;
  flex: 0 0 45% !important;
  max-width: 45% !important;
  overflow: hidden;
}

.ser-info-hero--pattern .ser-info-hero__image > .wp-block-group__inner-container {
  height: 100%;
  padding: 0 !important;
}

.ser-info-hero--pattern .ser-info-hero__image .wp-block-image,
.ser-info-hero--pattern .ser-info-hero__image figure {
  height: 100%;
  margin: 0 !important;
}

.ser-info-hero--pattern,
.ser-info-hero--pattern > .wp-block-group__inner-container,
.ser-info-hero--pattern > .wp-block-group__inner-container.wp-block-group__inner-container {
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
}

.ser-info-hero--pattern .ser-info-hero__image > .wp-block-group__inner-container,
.ser-info-hero--pattern .ser-info-hero__image .wp-block-image,
.ser-info-hero--pattern .ser-info-hero__image figure {
  height: 520px !important;
  max-height: 520px !important;
}

.ser-info-hero--pattern .ser-info-hero__image img {
  width: 100% !important;
  height: 520px !important;
  min-height: 0 !important;
  max-height: 520px !important;
  object-fit: cover;
  display: block;
}

/* long pattern names must be allowed to wrap on small screens */
.ser-info-hero--pattern h1,
.ser-info-hero--pattern h1.wp-block-heading {
  white-space: normal !important;
}

.ser-info-hero--pattern .ser-info-hero__eyebrow {
  font-family: granville, serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ebe6e3 !important;
  margin: 0 0 18px !important;
}

/* --- Description + CTA ----------------------------------------- */
.ser-pattern-intro .ser-info-text {
  max-width: 70ch;
}

.ser-pattern-intro .ser-info-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.ser-pattern-intro .ser-info-text a.ser-info-btn,
.ser-pattern-intro a.ser-info-btn,
.ser-pattern-back a.ser-info-btn {
  color: #fff !important;
  text-decoration: none !important;
}

.ser-pattern-intro .ser-info-text a.ser-info-btn:hover,
.ser-pattern-intro a.ser-info-btn:hover,
.ser-pattern-back a.ser-info-btn:hover {
  color: #fff !important;
  background: #2b2b2b;
}

/* --- "Fleiri mynstur" section ---------------------------------- */
.ser-pattern-more h2,
.ser-pattern-more h2.wp-block-heading {
  font-family: granville, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #2b2b2b;
  margin: 0 0 2.5rem !important;
}

.ser-pattern-more .ser-staff-grid--media > .wp-block-group__inner-container {
  margin-top: 1.75rem;
}

.ser-pattern-back {
  margin: 3rem 0 0 !important;
}

/* =========================================================
   Card grid: larger images in portrait ratio (3:4)
   ---------------------------------------------------------
   Client wants larger images so the wallcovering texture reads
   clearly, cropped to 3:4 so the grid is even and the captions
   line up. The grid gets a wider container than text sections.
   ========================================================= */

/* LIVE CHANGE 1 and 2 ----------------------------------------------
   Dev had:  body.page-id-101969 .ser-info-section
   101969 is the Arte page ID on DEV. On live the page gets a new ID
   at import, so the rule would go silent and the grid on the overview
   page would be narrower than on the pattern pages.

   body.serefni-arte comes from serefni_arte_body_class() in
   functions.php and matches BOTH the overview page and its children.
   That is why :not(.ser-pattern-intro) is needed: on dev the
   description block on the pattern pages did NOT get 1440px, and
   that must stay unchanged.
   ------------------------------------------------------------------ */
.ser-info-section.ser-pattern-more,
body.serefni-arte .ser-info-section:not(.ser-pattern-intro) {
  max-width: 1440px;
}

.ser-staff-grid--media > .wp-block-group__inner-container,
.ser-staff-grid--media:not(:has(> .wp-block-group__inner-container)) {
  column-gap: 1.75rem !important;
  row-gap: 3rem !important;
}

.ser-staff-card--media .ser-staff-card__name,
.ser-staff-card--media h3.ser-staff-card__name {
  padding-top: 1rem;
  font-size: 1.1rem;
  text-align: center;
}

/* =========================================================
   Responsive - breakpoints in descending order, widest first.

   LIVE CHANGE 3: on dev the 1280px block sat LAST, after 1024 and
   640. Media queries add no specificity, so with equal specificity
   the last matching rule wins. That made the 1280 block hand out
   4 columns all the way down to 641px, where the 1024 block was
   meant to give 3. The order below (1280 -> 1024 -> 640) fixes it.
   ========================================================= */

@media (max-width: 1280px) {
  .ser-staff-grid--media > .wp-block-group__inner-container,
  .ser-staff-grid--media:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .ser-staff-grid--media > .wp-block-group__inner-container,
  .ser-staff-grid--media:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .ser-info-hero--pattern .ser-info-hero__image,
  .ser-info-hero--pattern .ser-info-hero__image.wp-block-group {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  .ser-info-hero--pattern,
  .ser-info-hero--pattern > .wp-block-group__inner-container,
  .ser-info-hero--pattern > .wp-block-group__inner-container.wp-block-group__inner-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .ser-info-hero--pattern .ser-info-hero__image > .wp-block-group__inner-container,
  .ser-info-hero--pattern .ser-info-hero__image .wp-block-image,
  .ser-info-hero--pattern .ser-info-hero__image figure {
    height: auto !important;
    max-height: 280px !important;
  }
  .ser-info-hero--pattern .ser-info-hero__image img {
    height: 280px !important;
    min-height: 0 !important;
    max-height: 280px !important;
  }
  .ser-pattern-more h2,
  .ser-pattern-more h2.wp-block-heading {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .ser-staff-grid--media > .wp-block-group__inner-container,
  .ser-staff-grid--media:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1rem !important;
    row-gap: 2rem !important;
  }
  .ser-staff-card--media .ser-staff-card__name {
    font-size: .95rem;
    padding-top: .8rem;
  }
  /* Specificity guard: info-pages.css has a 3-class rule at 480px that
     collapses .ser-staff-grid to a single column. The media grid wants two. */
  .ser-staff-grid.ser-staff-grid--media.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}