/**
 * Digilayf for Health Sciences child theme: journal homepage regions.
 *
 * Regions keep their DOM order at every width; the grid only changes column
 * counts. Loaded after digilayf-base.css and reuses its --da-* tokens.
 */

.dla-home {
  --dla-section-gap: 0.625rem;
}

/* Shared actions */

.dla-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border: 2px solid transparent;
  border-radius: var(--da-radius-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--da-hover-duration) var(--da-hover-easing),
    border-color var(--da-hover-duration) var(--da-hover-easing),
    color var(--da-hover-duration) var(--da-hover-easing);
}

.dla-button--primary {
  background: var(--da-navy);
  border-color: var(--da-navy);
  color: var(--da-on-dark);
}

.dla-button--primary:hover,
.dla-button--primary:focus {
  background: var(--da-cyan);
  border-color: var(--da-cyan);
  color: var(--da-on-accent);
}

.dla-button--secondary {
  background: var(--da-surface);
  border-color: var(--da-navy);
  color: var(--da-navy);
}

.dla-button--secondary:hover,
.dla-button--secondary:focus {
  background: var(--da-surface-muted);
  border-color: var(--da-cyan-strong);
  color: var(--da-cyan-strong);
}

.dla-button--link {
  padding-right: 0;
  padding-left: 0;
  border: 0;
  color: var(--da-cyan-strong);
}

.dla-button--link:hover,
.dla-button--link:focus {
  color: var(--da-navy-hover);
}

/* Decorative chevrons are drawn with borders so screen readers do not announce them. */
.dla-button--link::after,
.dla-authors-item > .nav-link::after {
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

/* Hero */

.dla-hero {
  padding: var(--dla-section-gap) 0 0;
}

/* The header gap belongs to the first region, not to the movable hero. */
.dla-home > [data-dla-region]:first-child {
  padding-top: 15px;
}

.dla-hero-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--da-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.dla-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--da-surface-muted) 0%, var(--da-surface-tint) 100%);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
}

.dla-hero-content {
  --dla-hero-block-padding: 28px;
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 78ch;
  padding: var(--dla-hero-block-padding) 2.4rem;
}

.dla-hero-title {
  margin: 0 0 0.85rem;
  color: var(--da-navy);
  font-size: clamp(1.65rem, 3.45vw, 2.375rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dla-hero-summary {
  color: var(--da-text);
  font-size: 1.075rem;
  line-height: 1.65;
}

.dla-hero-summary > :last-child {
  margin-bottom: 0;
}

.dla-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Decorative button icons, coloured like the label so they follow hover. */
.dla-button-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  -webkit-mask: var(--dla-button-icon) center / contain no-repeat;
  mask: var(--dla-button-icon) center / contain no-repeat;
}

.dla-button-icon--arrow { --dla-button-icon: var(--dla-icon-arrow-right, url("../icons/arrow-right.svg")); }
.dla-button-icon--document { --dla-button-icon: var(--dla-icon-document, url("../icons/document.svg")); }

[dir="rtl"] .dla-button-icon--arrow {
  transform: scaleX(-1);
}

.dla-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  /* Crop from the left, which fades out anyway: text or a subject placed on
     the right of a hero image stays visible at every width. */
  object-position: right center;
}

/* Journal standards strip */

.dla-standards {
  padding-top: var(--dla-section-gap);
}

.dla-standards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0;
  padding: 0.25rem 0;
  background: var(--da-surface-muted);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
  list-style: none;
}

.dla-standard {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.25rem;
}

.dla-standard-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--da-cyan-strong);
}

.dla-standard-icon .dla-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.dla-standard-body {
  min-width: 0;
}

.dla-standard-title {
  margin: 0 0 0.2rem;
  color: var(--da-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.dla-standard-text {
  margin: 0;
  color: var(--da-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Shared frame and heading for managed homepage sections. */

.dla-section-card {
  padding: 1.5rem;
  background: var(--da-surface);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
}

.dla-section-title {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--da-border);
  color: var(--da-navy);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Highlights */

.dla-highlights {
  padding-top: var(--dla-section-gap);
}

.dla-highlights-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.dla-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  padding: 0 1.5rem;
}

.dla-highlight:first-child {
  padding-left: 0;
}

.dla-highlight + .dla-highlight {
  border-left: 1px solid var(--da-border);
}

.dla-highlight-icon {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

/* Wider items have room for a larger image without growing the strip, which
   is about as tall as the three text lines beside it. */
@media (min-width: 576px) {
  .dla-highlight-icon {
    width: 5rem;
    height: 5rem;
  }
}

.dla-highlight-body {
  min-width: 0;
}

.dla-highlight-title {
  margin: 0 0 0.25rem;
  color: var(--da-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.dla-highlight-desc {
  color: var(--da-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.dla-highlight-desc > :last-child {
  margin-bottom: 0;
}

.dla-highlight-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
}

.dla-highlight-link:hover,
.dla-highlight-link:focus {
  color: var(--da-navy-hover);
}

/*
 * HOME-05 scroller. scripts/digilayf-highlights.js adds .is-scroller and
 * shows the controls only while the items overflow; without it the grid
 * above stays in place. The list reaches into the card padding so that every
 * item, wherever scrolling stops, keeps the same inset as the heading.
 */
/* When the buttons wrap under the heading on narrow screens they keep clear of it. */
.dla-highlights-header {
  row-gap: 0.625rem;
}

.dla-highlights-controls {
  display: flex;
  gap: 0.5rem;
}

.dla-highlights-controls[hidden] {
  display: none;
}

/*
 * A 36px circle keeps room around it in the header; the invisible ::before
 * keeps the touch target at 44px (36 + 2 × 4), and the 8px gap stops the
 * two targets from overlapping.
 */
.dla-highlights-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--da-navy);
  background: var(--da-surface);
  border: 1px solid var(--da-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dla-highlights-nav::before {
  position: absolute;
  inset: -0.25rem;
  content: "";
}

.dla-highlights-nav:hover:not([aria-disabled="true"]) {
  color: var(--da-cyan-strong);
  background: var(--da-cyan-tint);
  border-color: var(--da-cyan);
}

/* Only the arrow fades, so the focus ring keeps full contrast at either end. */
.dla-highlights-nav[aria-disabled="true"] {
  cursor: default;
}

.dla-highlights-nav[aria-disabled="true"] .dla-highlights-nav-icon {
  opacity: 0.35;
}

.dla-highlights-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--dla-highlights-nav-icon) center / contain no-repeat;
  mask: var(--dla-highlights-nav-icon) center / contain no-repeat;
}

.dla-highlights-nav--prev { --dla-highlights-nav-icon: var(--dla-icon-chevron-left, url("../icons/chevron-left.svg")); }
.dla-highlights-nav--next { --dla-highlights-nav-icon: var(--dla-icon-chevron-right, url("../icons/chevron-right.svg")); }

[dir="rtl"] .dla-highlights-nav-icon {
  transform: scaleX(-1);
}

.dla-highlights.is-scroller .dla-highlights-list {
  --dla-highlights-per-view: 1;
  --dla-highlights-inset: 1.5rem;
  grid-template-columns: none;
  grid-auto-flow: column;
  /* Fewer items than fit share the full width, as in the grid. */
  grid-auto-columns: minmax(calc(100% / var(--dla-highlights-per-view)), 1fr);
  /* The vertical room keeps focus rings of links inside the clipped area. */
  margin: -0.5rem calc(-1 * var(--dla-highlights-inset));
  padding-block: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Hides the divider of the last visible item, which would double the card border. */
  clip-path: inset(0 2px 0 0);
}

.dla-highlights.is-scroller .dla-highlights-list::-webkit-scrollbar {
  display: none;
}

.dla-highlights.is-scroller .dla-highlight {
  margin: 0;
  padding: 0 var(--dla-highlights-inset);
  border: 0;
  scroll-snap-align: start;
}

/* Dividers on the trailing side, so none is left at the start edge after a step. */
.dla-highlights.is-scroller .dla-highlight:not(:last-child) {
  border-inline-end: 1px solid var(--da-border);
}

@media (min-width: 576px) {
  .dla-highlights.is-scroller .dla-highlights-list {
    --dla-highlights-per-view: 2;
  }
}

/* At most three items are visible, also on wide screens; more items scroll. */
@media (min-width: 992px) {
  .dla-highlights.is-scroller .dla-highlights-list {
    --dla-highlights-per-view: 3;
  }
}

@media (max-width: 575px) {
  .dla-highlights.is-scroller .dla-highlights-list {
    /* Matches the narrower card padding below. */
    --dla-highlights-inset: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dla-highlights-nav {
    transition: none;
  }
}

/* Journal showcase */

.dla-showcase {
  display: grid;
  gap: var(--dla-section-gap);
  padding-top: var(--dla-section-gap);
  padding-bottom: 0;
}

.dla-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  background: var(--da-surface);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
}

.dla-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--da-border);
}

.dla-card-title {
  margin: 0;
  color: var(--da-navy);
  font-size: 1.3rem;
  font-weight: 700;
}

.dla-card-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
}

.dla-issue--with-cover {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.dla-issue-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius-sm);
  box-shadow: var(--da-shadow);
}

/*
 * A narrow card leaves little room beside the cover. In the multi-column
 * showcase the cover only gets smaller: stacking it would make the whole row,
 * and so the neighbouring cards, much taller. In the single-column layout the
 * card stands alone, so the cover moves above the text, which then uses the
 * full width. The card width decides, not the viewport. Browsers without
 * container queries keep the regular side-by-side layout.
 */
.dla-issue-card {
  container-type: inline-size;
}

@container (max-width: 22rem) {
  .dla-issue--with-cover {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  @container (max-width: 22rem) {
    .dla-issue--with-cover {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.85rem;
    }

    .dla-issue-cover {
      width: min(100%, 8.5rem);
    }
  }
}

.dla-issue-body {
  min-width: 0;
}

.dla-issue-series {
  margin: 0 0 0.25rem;
  color: var(--da-navy);
  font-size: 1.15rem;
  font-weight: 700;
}

.dla-issue-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.dla-issue-date {
  margin: 0 0 0.5rem;
  color: var(--da-text-muted);
  font-size: 0.9rem;
}

/* The full description stays one click away on the issue page. */
.dla-issue-description {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.dla-issue-description > :last-child {
  margin-bottom: 0;
}

.dla-issue-galleys-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.dla-article-list,
.dla-authors-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dla-authors-list {
  /* Distance between the longest link text and the chevron column. */
  --dla-authors-arrow-gap: 55px;
}

.dla-article {
  display: grid;
  gap: 0.85rem;
  padding: 0.85rem 0;
}

.dla-article + .dla-article {
  border-top: 1px solid var(--da-border);
}

.dla-article:first-child {
  padding-top: 0;
}

.dla-article--with-cover {
  --dla-article-cover-width: 6rem;
  grid-template-columns: var(--dla-article-cover-width) minmax(0, 1fr);
  align-items: start;
}

.dla-article-cover {
  width: var(--dla-article-cover-width);
  height: 4.625rem;
  object-fit: cover;
  border-radius: var(--da-radius-sm);
}

.dla-article-body {
  min-width: 0;
}

/* Optically align the title's visible letters with the adjacent image. */
.dla-article--with-cover > .dla-article-body {
  margin-top: -0.1875rem;
}

.dla-article-title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.dla-article-title a {
  /* At most three lines on the homepage; the full title is still read by
     screen readers and shown on the issue and article pages. The clamp sits
     on the link itself so its own focus outline is not clipped. */
  display: -webkit-box;
  overflow: hidden;
  color: var(--da-navy);
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dla-article-title a:hover,
.dla-article-title a:focus {
  color: var(--da-cyan-strong);
  text-decoration: underline;
}

.dla-article-authors,
.dla-article-meta {
  margin: 0;
  color: var(--da-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.dla-authors-item + .dla-authors-item {
  border-top: 1px solid var(--da-border);
}

.dla-authors-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 62px;
  padding: 0.6rem 0.25rem;
  color: var(--da-navy);
  text-decoration: none;
}

.dla-authors-item > .nav-link::after {
  order: 2;
  margin-left: auto;
}

/* Spacer that holds the arrow gap (minus the link's two flex gaps). Its very
   large shrink factor makes a narrow card shorten the gap before the text
   loses even a fraction of a pixel (which would wrap it); once the spacer is
   used up the text shrinks as usual. The explicit width keeps it in the
   card's intrinsic (max-content) width. */
.dla-authors-item > .nav-link::before {
  flex: 0 100000 auto;
  order: 1;
  width: calc(var(--dla-authors-arrow-gap) - 1.5rem);
  min-width: 0;
  content: "";
}

.dla-authors-icon {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--da-radius-sm);
  background: var(--da-surface-muted);
}

.dla-authors-icon::before {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--da-cyan-strong);
  content: "";
  -webkit-mask: var(--dla-authors-icon) center / contain no-repeat;
  mask: var(--dla-authors-icon) center / contain no-repeat;
}

/* A slot without an icon keeps its empty tile, so the titles stay aligned. */
.dla-authors-icon:not([class*="dla-authors-icon--"])::before {
  content: none;
}

/* One rule per icon of DigilayfHealthSciencesThemePlugin::STANDARD_ICONS. */
.dla-authors-icon--open-access { --dla-authors-icon: var(--dla-icon-open-access, url("../icons/open-access.svg")); }
.dla-authors-icon--peer-review { --dla-authors-icon: var(--dla-icon-peer-review, url("../icons/peer-review.svg")); }
.dla-authors-icon--impact { --dla-authors-icon: var(--dla-icon-impact, url("../icons/impact.svg")); }
.dla-authors-icon--globe { --dla-authors-icon: var(--dla-icon-globe, url("../icons/globe.svg")); }
.dla-authors-icon--shield { --dla-authors-icon: var(--dla-icon-shield, url("../icons/shield.svg")); }
.dla-authors-icon--document { --dla-authors-icon: var(--dla-icon-document, url("../icons/document.svg")); }
.dla-authors-icon--clock { --dla-authors-icon: var(--dla-icon-clock, url("../icons/clock.svg")); }
.dla-authors-icon--award { --dla-authors-icon: var(--dla-icon-award, url("../icons/award.svg")); }
.dla-authors-icon--mail { --dla-authors-icon: var(--dla-icon-mail, url("../icons/mail.svg")); }

.dla-authors-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.dla-authors-label {
  color: var(--da-navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.dla-authors-description {
  color: var(--da-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.dla-authors-item > .nav-link:hover,
.dla-authors-item > .nav-link:focus {
  background: var(--da-surface-muted);
}

.dla-authors-item > .nav-link:hover .dla-authors-label,
.dla-authors-item > .nav-link:focus .dla-authors-label {
  color: var(--da-cyan-strong);
}

/* Announcements */
.dla-announcements {
  padding-top: var(--dla-section-gap);
}

.dla-announcements-list {
  display: grid;
}

.dla-announcement {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0;
}

.dla-announcement + .dla-announcement {
  padding-top: 1rem;
  border-top: 1px solid var(--da-border);
}

.dla-announcement-main {
  flex: 1 1 32rem;
  min-width: 0;
}

.dla-announcement-title {
  margin: 0 0 0.4rem;
  color: var(--da-navy);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.dla-announcement-summary {
  color: var(--da-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.dla-announcement-summary > :last-child {
  margin-bottom: 0;
}

.dla-announcement-meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.dla-announcement-date {
  color: var(--da-text-muted);
  font-size: 0.85rem;
}

/* Aims and scope card */

.dla-about {
  padding-top: var(--dla-section-gap);
}

.dla-about-inner {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--da-surface-muted);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
}

.dla-about-title {
  margin: 0;
  color: var(--da-navy);
  font-size: 1.3rem;
  font-weight: 700;
}

.dla-about-body {
  min-width: 0;
  color: var(--da-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.dla-about-body > :last-child {
  margin-bottom: 0;
}

.dla-about-body > p {
  margin: 0 0 0.75em;
}

/* Additional Content: the journal's own free area, framed like the other cards. */

.dla-additional {
  padding-top: var(--dla-section-gap);
}

.dla-additional-inner {
  min-width: 0;
  padding: 1.5rem;
  background: var(--da-surface-muted);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius);
}

.dla-additional-inner > :first-child {
  margin-top: 0;
}

.dla-additional-inner > :last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .dla-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Side-by-side cards share one height, so the description may use more
     lines; the link keeps following the text instead of the card bottom. */
  .dla-issue-description {
    -webkit-line-clamp: 7;
  }

  .dla-issue-body > .dla-button--link {
    margin-top: 0.75rem;
  }
}

/* Tablets show the standards as a balanced grid instead of three plus one. */
@media (min-width: 576px) and (max-width: 991px) {
  .dla-standards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Two-column tablets: a lone third card uses the full row instead of half of it. */
@media (min-width: 768px) and (max-width: 991px) {
  .dla-showcase > .dla-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  /* Keep all three showcase headings and dividers aligned without shrinking
     the 44px touch targets of the two header links. */
  .dla-card-link {
    margin-block: -0.5625rem;
  }

  /* The image fills the right part of the card and fades in behind the text. */
  .dla-hero-card--with-image .dla-hero-content {
    max-width: var(--dla-hero-copy-width, 54%);
  }

  .dla-hero-card--width-narrow { --dla-hero-copy-width: 46%; --dla-hero-image-start: 32%; }
  .dla-hero-card--width-wide { --dla-hero-copy-width: 62%; --dla-hero-image-start: 48%; }

  .dla-hero-card--with-image .dla-hero-media {
    position: absolute;
    inset: 0 0 0 var(--dla-hero-image-start, 40%);
  }

  .dla-hero-card--with-image .dla-hero-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 47%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 47%);
  }

  .dla-hero-card--image-left .dla-hero-content { margin-left: auto; }
  .dla-hero-card--image-left .dla-hero-media { inset: 0 var(--dla-hero-image-start, 40%) 0 0; }
  .dla-hero-card--image-left .dla-hero-media img {
    object-position: left center;
    /* Keep baked-in image labels out of the right-hand copy in every preset. */
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, transparent 22%, #000 55%);
    mask-image: linear-gradient(270deg, transparent 0%, transparent 22%, #000 55%);
  }

  /* Vertical dividers between standards, as in the reference design. */
  .dla-standard + .dla-standard {
    border-left: 1px solid var(--da-border);
  }

  /* One equal column per rendered card, up to three. */
  .dla-showcase {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  /* With all three cards, the link-only For Authors card is narrower, as in
     the reference design: it is as wide as its links need (text plus the
     fixed chevron gap), but never more than about a third of the row. */
  .dla-showcase:has(> .dla-card:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) fit-content(32%);
  }

  /* The cover takes a large share of the issue card, as in the reference. */
  .dla-issue--with-cover {
    grid-template-columns: minmax(5.5rem, 43%) minmax(0, 1fr);
  }

  /* All rows share the width of the longest one (capped by the card), so the
     chevrons stay aligned at a fixed distance from the text. The rows also
     grow with the card height, up to about the reference row height, so the
     link card shows no large empty area and its first link stays close to
     the heading. */
  .dla-authors-card > nav {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .dla-authors-list {
    display: grid;
    flex: 1;
    --dla-authors-copy-width: 10.5rem;
    grid-template-columns: minmax(0, max-content);
    grid-auto-rows: minmax(62px, 5rem);
  }

  .dla-authors-copy {
    flex: 1 1 auto;
    width: var(--dla-authors-copy-width);
  }

  /* Give both locales a comfortable text column; longer descriptions wrap
     within it instead of widening the card with their full text. */
  .dla-authors-description {
    width: 0;
    min-width: 100%;
    overflow-wrap: anywhere;
  }

  .dla-authors-item > .nav-link {
    height: 100%;
  }

  .dla-about-inner {
    grid-template-columns: fit-content(12rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }

  .dla-about-title {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid var(--da-border);
  }
}

@media (max-width: 575px) {
  .dla-hero-eyebrow { font-size: 0.75rem; }
  .dla-hero-content {
    padding: var(--dla-hero-block-padding) 1.25rem;
  }

  .dla-hero-actions .dla-button {
    width: 100%;
  }

  .dla-card {
    padding: 1.15rem;
  }

  .dla-about-inner,
  .dla-additional-inner,
  .dla-section-card {
    padding: 1.15rem;
  }

  /* Icon above the text, so the text gets the full width of a narrow card. */
  .dla-highlight {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0;
  }

  .dla-highlight + .dla-highlight {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--da-border);
    border-left: 0;
  }

  .dla-announcement-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
}