/**
 * Harringtons Reading – Related Products block
 *
 * Modern, semantic styling with WCAG-conscious focus states.
 */

.harringtons-reading-products {
  margin-block: clamp(1.5rem, 2vw, 2.5rem);
  padding-block: clamp(1rem, 1.5vw, 1.75rem);
  padding-inline: 0;
  background-color: transparent;
  border-block-start: 1px solid var(--wp--preset--color--base-3, #d4d4d4);
  border-block-end: 1px solid var(--wp--preset--color--base-3, #d4d4d4);
}

/* Tweak spacing & typography for the H2 inside this block */
.harringtons-reading-products > h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  text-transform: capitalize;
}

/* Two-column layout: list left, image right (CSS Grid) */
.harringtons-reading-products__layout {
  display: grid;
  grid-template-columns: minmax(0, 65%) minmax(0, 35%);
  align-items: stretch; /* columns share the same row height */
  gap: clamp(1rem, 2vw, 2rem);
  margin-block-start: 0.75rem;
}

.harringtons-reading-products__list-column,
.harringtons-reading-products__image-column {
  min-width: 0;
}

/* List layout */
.harringtons-reading-products__list {
  margin: 0;
  padding-inline-start: 1.25rem; /* Logical padding for list bullets */
  display: grid;
  gap: 0.5rem;
}

.harringtons-reading-products__item {
  list-style: disc;
}

/* Links – normal: no underline; hover/focus: underline */
.harringtons-reading-products__link {
  text-decoration: none;
  font-weight: 500;
}

/* Hover + keyboard focus get the underline */
.harringtons-reading-products__link:hover,
.harringtons-reading-products__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.18em;
}

/* Strong visible focus outline for keyboard users */
.harringtons-reading-products__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Slightly de-emphasise the price text appended to the title */
.harringtons-reading-products__price {
  font-weight: 400;
  font-size: 0.95em;
}

/* IMAGE COLUMN: height-driven layout on wide screens */
.harringtons-reading-products__image-column {
  position: relative;
}

/* The link fills the column vertically and centers the image horizontally */
.harringtons-reading-products__image-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;          /* full width of the grid cell */
  bottom: 0;         /* matches the grid row height (same as list) */
  display: flex;
  align-items: stretch;
  justify-content: center; /* horizontally center the image */
}

/* Image: height dictates width, centered via flex */
.harringtons-reading-products__image {
  display: block;
  height: 100%;      /* match list height */
  width: auto;       /* maintain aspect ratio (square => width == height) */
  max-width: 100%;   /* don’t overflow the column */
  border-radius: 0.5rem;
}

/* Editor-only notice */
.harringtons-reading-products__notice {
  margin: 0.5rem 0 0;
  font-size: 0.95em;
  color: var(--wp--preset--color--contrast-2, #555555);
}

/* Responsive: stack list and image on small screens */
@media (max-width: 768px) {
  .harringtons-reading-products__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .harringtons-reading-products__image-column {
    position: relative;
  }

  .harringtons-reading-products__image-link {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    justify-content: center;
    margin-block-start: 0.75rem;
  }

  .harringtons-reading-products__image {
    height: auto;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}