/* LandmArch layout fixes
 *
 * Answers three of Dinos's four points. Every rule is scoped to a specific Elementor
 * element id, so nothing here can leak into other sections or other pages.
 *
 * Element ids, confirmed against the rendered markup:
 *   51846c6  the "FEATURED IN & RECOGNISED BY" press strip (flex row container)
 *   d0683ed  the portfolio loop-carousel on the home page
 *   fd5ef45  the featured image inside loop item template 675
 *   8ff062f  the loop item card root (rendered as <a>, flex column)
 *   b1c5687  the caption row at the bottom of each card
 */

/* ------------------------------------------------------------------ *
 * 1. Press strip, rebuilt as Option C - two tiers
 *
 * The original row mixed two different claims: two recognitions (IFLA,
 * WLA - both open a lightbox) and three press articles (all linking out).
 * Making the five uniform was never going to fix that, because the fault
 * was the mixing, not the sizing. Masonry would have been worse again -
 * it deliberately produces UNEQUAL heights, and these five spanned 1.13
 * to 2.73 in aspect ratio.
 *
 * Now: badges stay as images at one height; press becomes type, so the
 * headline is finally legible.
 * ------------------------------------------------------------------ */
.elementor-element-51846c6 .lm-tier-label { margin: 0; }

/* Badges: one optical height, contained rather than cropped - these are
   marks, and cropping a mark damages it.
   The row is spread across the full width to match the three press columns
   beneath it. Left-packed, the two badges left ~730px of dead white on
   desktop and the two tiers looked misaligned rather than stacked. */
/* Targeted by id, not by structure. The row renders as e-con-full (no .e-con-inner)
   and Elementor labels it e-parent rather than e-child, so a descendant selector
   written against the expected nesting matched only half of what I assumed. The id
   is stable and does not care how Elementor classifies the container. */
.elementor-element-f84201c {
  justify-content: flex-start;
}

.elementor-element-51846c6 .elementor-widget-image {
  flex: 0 1 auto;
}

@media (min-width: 768px) {
  /* Three fixed tracks, matching the three press columns below, so IFLA sits over
     ARCHISEARCH and WLA over ELXIS.
     An earlier attempt used repeat(auto-fit, minmax(220px, 1fr)) to "match the press
     grid" - but auto-fit fills the available width with as many tracks as fit, which
     resolved to more than three and scattered the two badges onto non-matching
     columns. Worse than the left-packing it replaced. The press grid can stay
     auto-fit because it has three items to fill it; this row has two and must be
     told the count explicitly. */
  .elementor-element-f84201c {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 34px;
    align-items: center;
    justify-items: start;
  }
}

.elementor-element-51846c6 .elementor-widget-image img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Generous gaps do the separating now that the rules are gone. The column gap has to be
   large enough to read as deliberate space rather than an accident of the grid. */
.lm-press {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 46px 60px;
}

.lm-press a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* The rule runs the full column width, not the width of the word. Sized to the text it
   stopped mid-column under a short name like ELXIS and read as a rendering fault, while
   under ARCHISEARCH it looked deliberate - the inconsistency was the problem. */
/* Wordmark fallback, kept for any item that has no logo file. */
.lm-press .lm-press-pub {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* Real logos. All five are normalised to one ink on transparency, so the only job left
   here is optical balance: they range from a 1.08:1 monogram to a 7.85:1 wordmark, and
   a single shared height would make one a postage stamp and the other a ribbon. Capping
   BOTH dimensions and letting contain decide sizes each by the room it actually needs. */
/* Scoped through .lm-press so the selector carries enough weight to beat the theme's
   own `img { max-width: 100% }`. The unscoped version lost that fight silently: the probe
   showed max-height applying while max-width computed to 100%, which is 329px of column
   and clamps nothing. Specificity, not a missing rule. */
/* One shared box, not three separate caps.
   Capping each logo individually gave them heights of 56px, 34px and 21px, so each
   headline started at a different baseline and the row read as ragged - the level rules
   above them only made it more obvious. A fixed-height box with contain fixes both things
   at once: every headline begins at the same y, and each mark is scaled by the room it
   actually needs rather than by a number I guessed per file.
   It also removes the per-logo max-height overrides, which is where the specificity
   tangle kept coming from. */
.lm-press a .lm-press-logo {
  display: block;
  width: auto;
  height: 56px;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

.lm-press a:hover .lm-press-logo { opacity: 1; }

/* No rule between logo and headline. A full-width 2px line sitting under a logo stopped
   reading as an accent and started reading as a divider, cutting each item into two
   unrelated bands. The green now marks the item on hover instead, where it signals the
   link rather than fencing off the headline. */
.lm-press .lm-press-head {
  display: block;
  padding-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* No rule above each item either.
   The border-top I added here was meant to replace the green line that had been sitting
   between logo and headline. It moved the problem up a level and made it worse: each rule
   runs the full column width (~600px at 1920) while the content beneath it is a 168px logo
   and a ~280px headline, so three long lines with small breaks read as one chopped divider
   straight across the page - the wider the viewport, the more joined-up it looks.
   Whitespace separates these perfectly well, and the shared logo box already gives the row
   its alignment. Hover is carried by the logo's opacity, which needs no border. */
.lm-press a {
  padding-top: 0;
}

/* Recognised-by row: the two award marks, sharing one optical height. */
.elementor-element-f84201c .elementor-widget-image img {
  height: auto;
  max-height: 52px;
  max-width: 210px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.elementor-element-f84201c .elementor-widget-image img:hover { opacity: 1; }

@media (max-width: 767px) {
  /* These MUST carry the same scoping as the desktop rules above. When the desktop block
     was raised to `.lm-press a .lm-press-logo` (0,3,0) and this one was left at
     `.lm-press-logo` (0,1,0), the desktop values won at every viewport and this whole
     media query stopped doing anything - the phone was rendering desktop logo sizes.
     Specificity beats source order, and a media query grants no extra weight. */
  /* Override `height`, not `max-height`. The base rule sets a fixed height:56px, and a
     max-height cannot shrink a fixed height - the box would stay 56px tall and only clip
     what shows inside it, putting the ragged baselines straight back on the phone.
     The per-logo overrides are gone here too: one box plus contain is what makes the
     baselines level, and reintroducing per-file caps is what caused the tangle. */
  .lm-press a .lm-press-logo { height: 44px; max-width: 150px; }
  .elementor-element-f84201c .elementor-widget-image img { max-height: 42px; }
}

.lm-press a:hover .lm-press-head { opacity: 1; }
.lm-press a:focus-visible { outline: 2px solid #2D635C; outline-offset: 4px; }

@media (max-width: 1024px) {
  .elementor-element-51846c6 .elementor-widget-image img { height: 52px; }
}

@media (max-width: 767px) {
  .elementor-element-51846c6 .elementor-widget-image img { height: 44px; }
  .lm-press { gap: 18px 24px; }
}

/* ------------------------------------------------------------------ *
 * 2. Portfolio cards - "css to make the portfolio items equal height"
 *
 * The captions sit at different heights because the featured images have
 * different aspect ratios, so each card's image block is a different
 * height. Pinning one ratio on the image is what actually fixes it; the
 * flex rules below then hold the caption to the bottom of every card so a
 * two-line title does not shunt its card taller than its neighbours.
 * ------------------------------------------------------------------ */
.elementor-element-d0683ed .swiper-wrapper { align-items: stretch; }

.elementor-element-d0683ed .swiper-slide { height: auto; }

.elementor-element-d0683ed .swiper-slide > .elementor-element-8ff062f {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The image container should take the slack, so the caption lands level. */
.elementor-element-d0683ed .elementor-element-7a7727a { flex: 1 1 auto; }

.elementor-element-d0683ed .elementor-element-fd5ef45 img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.elementor-element-d0683ed .elementor-element-b1c5687 { margin-top: auto; }

@media (max-width: 767px) {
  .elementor-element-d0683ed .elementor-element-fd5ef45 img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ *
 * 3. Link lists - "maybe those become lists and not paragraphs?"
 *
 * Styling for the <ul class="lm-link-list"> that replaces the old
 * middle-dot paragraphs. Two columns on desktop so a 13-item list does not
 * become a long thin ribbon, collapsing to one column on narrow screens.
 * ------------------------------------------------------------------ */
.lm-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}

.lm-link-list li {
  break-inside: avoid;
  margin: 0 0 0.45em;
  padding-left: 0.9em;
  position: relative;
  line-height: 1.45;
}

/* A small marker, rather than a default bullet, to sit with the type.
   In the practice's green (accent 3, the same token as the footer CTA) - this is
   the "somewhere in details" use: it costs almost nothing visually, but it puts the
   identity colour on every one of these lists. Deliberately NOT applied to the
   stats figures or section eyebrows as well: the green already marks 41 links on
   this page, and spending it everywhere would stop it meaning "clickable". */
.lm-link-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2D635C;
}

@media (max-width: 767px) {
  .lm-link-list { columns: 1; }
}