/* Blog cards: the Elementor loop item 2411 (.BlogLoop) on /blog/, archives and posts, restyled after the homepage journal.
   Paper card on a hairline, image on a fixed 16:10 frame, date as a small-caps eyebrow, the title in the display face,
   the Read more button pinned to the card's foot so a row lines up. Phones get a compact list row: thumb, date, title.
   Elementor prints its own rules (3 classes) after this file, so every selector here starts .e-loop-item.elementor-2411. */

.elementor-widget-loop-grid:has(.BlogLoop) { --grid-row-gap: 32px; --grid-column-gap: 24px; }
.elementor-widget-loop-grid:has(.BlogLoop) .elementor-loop-container { row-gap: 32px; column-gap: 24px; }

.e-loop-item.elementor-2411 { height: 100%; }
.e-loop-item.elementor-2411 .elementor-element.BlogLoop { height: 100%; overflow: hidden; border: 1px solid var(--ttc-line); border-radius: 2px; background: var(--ttc-paper); box-shadow: 0 1px 2px rgba(var(--ttc-shadow-rgb), 0.04); transition: transform 0.5s var(--ttc-ease), box-shadow 0.5s var(--ttc-ease), border-color 0.3s ease; }
.e-loop-item.elementor-2411 .elementor-element.BlogLoop > .e-con-inner { display: flex; flex-direction: column; height: 100%; gap: 0; padding: 0; }
@media (hover: hover) {
  .e-loop-item.elementor-2411 .elementor-element.BlogLoop:hover { transform: translateY(-4px); border-color: rgba(var(--ttc-gold-rgb), 0.55); box-shadow: 0 24px 44px -30px rgba(var(--ttc-shadow-rgb), 0.45); }
  .e-loop-item.elementor-2411 .BlogLoop:hover .elementor-widget-theme-post-featured-image img { transform: scale(1.04); }
}
.e-loop-item.elementor-2411 .BlogLoop:focus-within { border-color: var(--ttc-clay); }

/* Image: a steady frame whatever the upload's shape. */
.e-loop-item.elementor-2411 .elementor-widget-theme-post-featured-image { overflow: hidden; margin: 0; }
.e-loop-item.elementor-2411 .elementor-element .elementor-widget-theme-post-featured-image img,
.e-loop-item.elementor-2411 .elementor-element.elementor-widget-theme-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; transition: transform 1.1s var(--ttc-ease); }

/* Text: date eyebrow, title, the button at the foot. */
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.e-con-full { flex: 1; gap: 10px; --gap: 10px; padding: 20px 22px 22px; --padding-top: 20px; --padding-right: 22px; --padding-bottom: 22px; --padding-left: 22px; }
.e-loop-item.elementor-2411 .BlogLoop .elementor-post-info a,
.e-loop-item.elementor-2411 .BlogLoop .elementor-post-info time { color: var(--ttc-clay-text); font: 600 0.7rem/1 var(--ttc-accent); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; font-variant-numeric: lining-nums; }
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-theme-post-title { padding: 0; border: 0; }
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-theme-post-title .elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--ttc-deep); font: 600 1.5rem/1.18 var(--ttc-display); text-wrap: balance; }
/* Read more: the whole card is the link (Elementor's script), so the button steps down to a quiet foot line under a
   hairline, small caps and an arrow that slides on the card's hover; the letter slide runs on the card's hover too. */
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-button { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ttc-line); }
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-button .elementor-button { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ttc-clay-text); font: 600 0.72rem/1 var(--ttc-accent); letter-spacing: 0.18em; text-transform: uppercase; transform: none; }
.e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-button .elementor-button::after { content: "\2192"; font: 400 1rem/1 var(--ttc-body); letter-spacing: 0; transition: transform 0.4s var(--ttc-ease); }
.e-loop-item.elementor-2411 .BlogLoop .elementor-button:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 4px; }
@media (hover: hover) {
  .e-loop-item.elementor-2411 .BlogLoop:hover .elementor-button::after { transform: translateX(6px); }
  .e-loop-item.elementor-2411 .BlogLoop:hover .ttc-letters__c { transform: translateY(-100%); }
}

/* The newest story leads: two columns wide, image beside the text, the title set larger. */
@media (min-width: 1025px) {
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) { grid-column: span 2; }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .elementor-element.BlogLoop > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .elementor-element.elementor-widget-theme-post-featured-image { height: 100%; }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .elementor-element.elementor-widget-theme-post-featured-image img { height: 100%; min-height: 340px; aspect-ratio: auto; }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .BlogLoop .elementor-element.e-con-full { justify-content: center; gap: 16px; --gap: 16px; padding: 36px; --padding-top: 36px; --padding-right: 36px; --padding-bottom: 36px; --padding-left: 36px; }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .BlogLoop .elementor-element.elementor-widget-theme-post-title .elementor-heading-title { -webkit-line-clamp: 4; font-size: clamp(1.9rem, 2.4vw, 2.4rem); line-height: 1.12; }
  .e-loop-item.elementor-2411:nth-child(1 of .e-loop-item) .BlogLoop .elementor-element.elementor-widget-button { margin-top: 8px; }
}

@media (max-width: 767px) {
  .elementor-widget-loop-grid:has(.BlogLoop) { --grid-row-gap: 12px; padding-inline: 10px; }
  .elementor-widget-loop-grid:has(.BlogLoop) .elementor-loop-container { row-gap: 12px; }
  /* A list row: square thumb on the left, date and title beside it; the whole card is the link (Elementor's own script). */
  .e-loop-item.elementor-2411 .elementor-element.BlogLoop > .e-con-inner { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px; }
  .e-loop-item.elementor-2411 .elementor-element .elementor-widget-theme-post-featured-image img,
  .e-loop-item.elementor-2411 .elementor-element.elementor-widget-theme-post-featured-image img { aspect-ratio: 1; border-radius: 2px; }
  .e-loop-item.elementor-2411 .elementor-widget-theme-post-featured-image { border-radius: 2px; }
  .e-loop-item.elementor-2411 .BlogLoop .elementor-element.e-con-full { gap: 6px; --gap: 6px; padding: 0 6px 0 0; --padding-top: 0; --padding-right: 6px; --padding-bottom: 0; --padding-left: 0; }
  .e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-theme-post-title .elementor-heading-title { font-size: 1.15rem; line-height: 1.22; }
  /* The button stays for screen readers and keyboards, out of sight. */
  .e-loop-item.elementor-2411 .BlogLoop .elementor-element.elementor-widget-button { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .e-loop-item.elementor-2411 .elementor-element.BlogLoop, .e-loop-item.elementor-2411 .BlogLoop img, .e-loop-item.elementor-2411 .BlogLoop .elementor-button::after { transition: none; }
  .e-loop-item.elementor-2411 .elementor-element.BlogLoop:hover, .e-loop-item.elementor-2411 .BlogLoop:hover img { transform: none; }
}