/* =========================================================
   Arte – Hótelveggfóður
   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.
   ========================================================= */

/* --- 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;
}

/* --- Responsive ------------------------------------------------ */
@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: 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: 1.75rem !important;
  }
  .ser-staff-card--media .ser-staff-card__name {
    font-size: .95rem;
    padding-top: .85rem;
  }
}

/* =========================================================
   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" ------------------------------------------ */
.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;
}

/* --- Responsive ------------------------------------------------ */
@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;
  }
}

/* --- 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. --- */
@media (max-width: 640px) {
  .ser-staff-grid.ser-staff-grid--media.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   Kortagrid: stærri myndir í standandi hlutföllum (3:4)
   ---------------------------------------------------------
   Viðskiptavinur vill stærri myndir til að áferð veggfóðursins
   sjáist betur. Fjórar í röð í stað fimm, og allar myndir
   klipptar í 3:4 svo gridið sé jafnt og nöfnin standist á.
   Gridið fær meira börð en almennir textakassar.
   ========================================================= */
.ser-info-section.ser-pattern-more,
body.page-id-101969 .ser-info-section {
  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;
}

@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: 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;
  }
}


/* fjórar í röð á milliskjáum svo kortin verði ekki of smá */
@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;
  }
}