/* Blog Posts Grid (Elementor widget "Blog Posts Grid", markup from blog/blocks.php).
 *
 * Colours fall back to the homepage tokens (--lus-*, only defined on .lus-home-page / .lus-stays-page) so the grid looks the
 * same there and, with the same values, on any other page such as /blog/. Every Style-tab control in the widget overrides one of
 * the rules below; the values here are what a widget with no style changes looks like.
 *
 * Selectors are prefixed with .lus-blog on purpose: Elementor's own reset (".elementor img { height: auto; max-width: 100% }")
 * has a higher specificity than a lone class, and would break the photo that is sized to fill its frame.
 */
.lus-blog {
    --lb-ink: var(--lus-ink, #1c1917);
    --lb-body: #57534e;
    --lb-muted: var(--lus-muted, #78716c);
    --lb-tint: var(--lus-tint, #f4efe9);
    --lb-line: var(--lus-line, #e7e0d8);
    --lb-accent: var(--lus-accent, #d4363c);
    --lb-radius: 28px;
    --lb-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 32px rgba(28, 25, 23, .08);
    --lb-shadow-lift: 0 2px 4px rgba(28, 25, 23, .05), 0 20px 44px rgba(28, 25, 23, .14);
    --lb-ease: var(--lus-ease, cubic-bezier(.22, .61, .36, 1));
    width: 100%;
    color: var(--lb-ink);
    font-family: inherit;
}
.lus-blog *, .lus-blog *::before, .lus-blog *::after { box-sizing: border-box; }
.lus-blog__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ---- Heading (optional) ---- */
.lus-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.lus-blog .lus-blog__title { margin: 0; font-family: inherit; font-weight: 600; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--lb-ink); }
.lus-blog .lus-blog__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--lb-muted); }
.lus-blog .lus-blog__all { flex: none; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--lb-ink); text-decoration: none; border-bottom: 1px solid var(--lb-line); padding-bottom: 2px; transition: color 250ms var(--lb-ease), border-color 250ms var(--lb-ease); }
.lus-blog .lus-blog__all:hover { color: var(--lb-accent); border-color: var(--lb-accent); }

/* ---- Grid ---- */
.lus-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: stretch; }
@media (max-width: 1024px) { .lus-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 767px)  { .lus-blog__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- Card ---- */
/* overflow:hidden + the radius clips the photo's corners, so the photo needs no radius of its own. The stretched title link below
   (::after) makes the whole card one click target. */
.lus-blog .lus-blog-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: #fff; border-radius: var(--lb-radius); box-shadow: var(--lb-shadow); overflow: hidden;
    transition: transform 250ms var(--lb-ease), box-shadow 250ms var(--lb-ease);
}
.lus-blog .lus-blog-card:hover { transform: translateY(-4px); box-shadow: var(--lb-shadow-lift); }

.lus-blog .lus-blog-card__media { display: block; position: relative; flex: none; aspect-ratio: 5 / 3; overflow: hidden; background: var(--lb-tint); }
.lus-blog .lus-blog-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; transition: transform 600ms var(--lb-ease); }
.lus-blog .lus-blog-card:hover .lus-blog-card__img { transform: scale(1.04); }

.lus-blog .lus-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 14px; padding: 24px 26px 30px; }

/* Label pill + date + reading time on one line */
.lus-blog .lus-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; line-height: 1.4; color: var(--lb-muted); }
.lus-blog .lus-blog-card__label {
    display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
    background: var(--lb-tint); color: var(--lb-ink); font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
/* A label that links has to sit above the card's stretched link. */
.lus-blog a.lus-blog-card__label { position: relative; z-index: 2; transition: background-color 250ms var(--lb-ease); }
.lus-blog a.lus-blog-card__label:hover { background: var(--lb-line); }
/* Date, reading time and author, divided by the "Separator" setting. The separator is drawn in the 16px gap to the LEFT of every item but the
   first (right: 100%), and the row clips what overflows its own left edge. So when a narrow card wraps the row, the item that starts the
   new line loses its separator instead of the previous line ending on a dangling "·". */
.lus-blog .lus-blog-card__info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; overflow: hidden; }
.lus-blog .lus-blog-card__info > * { position: relative; margin-right: 16px; }
.lus-blog .lus-blog-card__info > * + *::before { content: attr(data-sep); position: absolute; right: 100%; margin-right: 8px; transform: translateX(50%); opacity: .7; }

.lus-blog .lus-blog-card__title {
    margin: 0; padding: 0; font-family: inherit; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: var(--lb-ink);
    /* "Title lines" control: --lb-title-lines is unset (= no cut) until a number above 0 is typed. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lb-title-lines, none); overflow: hidden;
}
.lus-blog .lus-blog-card__link { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; }
.lus-blog .lus-blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lus-blog .lus-blog-card__link:focus-visible { outline: none; }
.lus-blog .lus-blog-card__link:focus-visible::after { outline: 3px solid var(--lb-accent); outline-offset: -3px; border-radius: inherit; }

.lus-blog .lus-blog-card__excerpt {
    margin: 0; font-size: 15px; line-height: 1.5; color: var(--lb-body);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lb-lines, 3); overflow: hidden;
}

/* "Read more" is a visual cue only (the title link is the real one), pushed to the bottom so every card ends level. */
.lus-blog .lus-blog-card__more { margin-top: auto; padding-top: 2px; font-size: 15px; font-weight: 600; color: var(--lb-ink); }
.lus-blog .lus-blog-card__more::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform 250ms var(--lb-ease); }
.lus-blog .lus-blog-card:hover .lus-blog-card__more::after { transform: translateX(4px); }

/* ---- Page numbers ---- */
.lus-blog__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.lus-blog .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--lb-line); background: #fff; color: var(--lb-ink); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
    transition: background-color 250ms var(--lb-ease), color 250ms var(--lb-ease);
}
.lus-blog a.page-numbers:hover { background: var(--lb-tint); }
.lus-blog .page-numbers.current { background: var(--lb-ink); border-color: var(--lb-ink); color: #fff; }
.lus-blog .page-numbers.dots { background: transparent; border-color: transparent; min-width: 0; padding: 0 4px; }
.lus-blog__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- No posts ---- */
.lus-blog .lus-blog__empty { margin: 0; padding: 48px 24px; text-align: center; font-size: 16px; color: var(--lb-muted); border: 1px dashed var(--lb-line); border-radius: var(--lb-radius); }

/* !important on purpose: the Lift / Zoom controls in Elementor write more specific selectors than these, and someone who asked their
   system for less motion should not get the animation just because the widget was styled. */
@media (prefers-reduced-motion: reduce) {
    .lus-blog .lus-blog-card, .lus-blog .lus-blog-card__img, .lus-blog .lus-blog-card__more::after { transition: none !important; }
    .lus-blog .lus-blog-card:hover, .lus-blog .lus-blog-card:hover .lus-blog-card__img, .lus-blog .lus-blog-card:hover .lus-blog-card__more::after { transform: none !important; }
}