/* Lafferty Travel Content -- presentation for published records.

   A host theme styles this by setting --lt-* custom properties on any ancestor, never
   by overriding these selectors: the properties are the stable contract,
   the selectors are an implementation detail. Each var() fallback is a neutral
   value that works without a theme, and every text colour default keeps
   AA contrast on the default white card. */

/* ---- grid: one column on phones, at most N columns when there is room --- */

.lt-grid {
  display: grid;
  gap: var(--lt-gap, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Never more than N columns, never narrower than the card minimum:
     the max() floor stops auto-fill from adding an extra column on a wide
     screen, and min(100%, ...) keeps a phone at one column without
     overflowing. */
  --lt-cols: 3;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      min(
        100%,
        max(
          var(--lt-card-min, 16rem),
          (100% - (var(--lt-cols) - 1) * var(--lt-gap, 1.25rem)) / var(--lt-cols)
        )
      ),
      1fr
    )
  );
}
.lt-grid--1 {
  --lt-cols: 1;
}
.lt-grid--2 {
  --lt-cols: 2;
}
.lt-grid--3 {
  --lt-cols: 3;
}
.lt-grid--4 {
  --lt-cols: 4;
  --lt-card-min: 13rem;
}

.lt-grid__item {
  display: flex;
  margin: 0;
}

/* ---- card --------------------------------------------------------------- */

.lt-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--lt-card-bg, #fff);
  border: var(--lt-card-border, 1px solid rgba(0, 0, 0, 0.12));
  border-radius: var(--lt-card-radius, 12px);
  box-shadow: var(--lt-card-shadow, none);
  overflow: hidden;
}
.lt-card__media {
  aspect-ratio: var(--lt-media-ratio, 16 / 10);
  background: var(--lt-media-bg, transparent);
  overflow: hidden;
}
.lt-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--lt-media-fit, cover);
  padding: var(--lt-media-padding, 0);
  box-sizing: border-box;
}
.lt-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.625rem;
  padding: var(--lt-card-padding, 1.125rem);
  color: var(--lt-text-color, inherit);
}
.lt-card__title {
  margin: 0;
  font-size: var(--lt-title-size, 1.1875rem);
  line-height: 1.25;
  color: var(--lt-title-color, inherit);
  overflow-wrap: anywhere;
}
.lt-card__description {
  margin: 0;
}
.lt-card__why {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: var(--lt-why-bg, #edf8f4);
  color: var(--lt-why-fg, #123a2e);
}

/* Actions sit at the bottom of every card, so buttons line up across a row. */
.lt-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 0.375rem;
}
.lt-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px target, WCAG 2.5.8 and beyond */
  padding: 0.5rem 1.25rem;
  border-radius: var(--lt-btn-radius, 999px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.lt-card__button--primary {
  background: var(--lt-btn-bg, #0d2845);
  color: var(--lt-btn-fg, #fff);
  border: 2px solid var(--lt-btn-bg, #0d2845);
}
.lt-card__button--primary:hover {
  background: var(--lt-btn-bg-hover, #164a7d);
  border-color: var(--lt-btn-bg-hover, #164a7d);
  color: var(--lt-btn-fg, #fff);
  text-decoration: underline;
}
.lt-card__button--secondary {
  background: var(--lt-btn2-bg, transparent);
  color: var(--lt-btn2-fg, #0d2845);
  border: 2px solid var(--lt-btn2-border, #0d2845);
}
.lt-card__button--secondary:hover {
  color: var(--lt-btn2-fg, #0d2845);
  text-decoration: underline;
}
.lt-card__button:focus-visible,
.lt-filter__link:focus-visible {
  outline: 3px solid var(--lt-focus, #0d2845);
  outline-offset: 3px;
}

/* "(paid link)": part of the button, so it is read with it and never wraps
   away from it. 1.3.2: quieter than the label (14px regular against the
   button's bold label) so View Product leads -- same colour, so it stays
   fully readable; never hidden or faded. */
.lt-card__paid {
  /* The button is a flex container, which drops the literal space. */
  margin-left: 0.3em;
  font-weight: 400;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Amazon call to action (1.3.3): a large, rounded, playful orange button
   naming the destination, with an external-link arrow, and "Affiliate Link"
   directly beneath. It spans the card's text column so it is obvious on
   every width. White on the orange is 3.1:1 or better, with the label at
   19px bold (WCAG large text, 3:1). */
.lt-card__cta {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.3125rem;
  /* 1.3.4: every Amazon action area reserves room for a Watch Video button,
     with or without a video, so View on Amazon and "Affiliate Link" sit at the
     same height on every card in a row (the actions row is anchored to the
     bottom of equal-height cards). Sum of: Amazon button, gap, "Affiliate Link"
     line, gap, video margin, video button. */
  min-height: calc(3.125rem + 0.3125rem + 0.875rem * 1.3 + 0.3125rem + 0.3125rem + 2.875rem);
}
.lt-card__button--amazon {
  gap: 0.5rem;
  min-height: 3.125rem; /* 50px: well above the 44px target */
  padding: 0.625rem 1.25rem;
  border: 0;
  background: linear-gradient(180deg, #ec6b12 0%, #dc5a0a 100%);
  box-shadow:
    0 4px 0 #b74808,
    0 8px 18px rgba(220, 90, 10, 0.28);
  color: #fff;
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(120, 40, 0, 0.35);
}
.lt-card__button--amazon:hover {
  background: linear-gradient(180deg, #dc5a0a 0%, #c44f07 100%);
  color: #fff;
  text-decoration: underline;
}
.lt-card__button--amazon:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #b74808,
    0 4px 10px rgba(220, 90, 10, 0.25);
}
.lt-card__extlink {
  flex: none;
}
/* Watch Video on an Amazon card (1.3.4): full width, deep blue with a white
   play icon, lower and lighter than View on Amazon so the Amazon button
   stays primary. White on #0e3b78 is 11:1. A little space above separates
   it from "Affiliate Link", which belongs to the Amazon button. */
.lt-card__button--video {
  gap: 0.5rem;
  min-height: 2.875rem; /* 46px: above the 44px target */
  margin-top: 0.3125rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  background: var(--lt-video-bg, #0e3b78);
  color: #fff;
  font-size: 1.0625rem;
}
.lt-card__button--video:hover {
  background: var(--lt-video-bg-hover, #0a2f63);
  color: #fff;
  text-decoration: underline;
}
.lt-card__playicon {
  flex: none;
}
.lt-card__paidnote {
  text-align: center;
  color: var(--lt-paidnote-fg, #1e3550);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* The full affiliate statement, once, above the list it applies to. */
/* 1.3.1: centred as one continuous statement; it wraps naturally (still
   centred) when it does not fit on one line.
   1.3.2: the whole area spans the content width, so it is centred on the
   page -- themes commonly cap paragraphs at a reading width (the live
   theme's p { max-width: var(--measure) } held it to 534px on the left).
   The text stays 15px and wraps rather than shrinking. */
.lt-disclosure-notice {
  max-width: none;
  text-align: center;
  overflow-wrap: anywhere;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--lt-notice-bg, #f3f6f9);
  color: var(--lt-notice-fg, #374151);
  font-size: 0.9375rem;
}

.lt-single .lt-card__media {
  aspect-ratio: auto;
}

/* ---- category filter ---------------------------------------------------- */

.lt-filter {
  margin: 0 0 1.5rem;
}
.lt-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lt-filter__list li {
  margin: 0;
}
.lt-filter__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 1rem;
  border: 2px solid var(--lt-filter-fg, #0d2845);
  border-radius: 999px;
  background: var(--lt-filter-bg, #fff);
  color: var(--lt-filter-fg, #0d2845);
  font-weight: 600;
  text-decoration: none;
}
.lt-filter__link:hover {
  text-decoration: underline;
}
.lt-filter__link[aria-current="page"] {
  background: var(--lt-filter-current-bg, #0d2845);
  border-color: var(--lt-filter-current-bg, #0d2845);
  color: var(--lt-filter-current-fg, #fff);
}
.lt-filter__count {
  font-weight: 400;
  margin-left: 0.25rem;
}

/* ---- section pages: search, summary, pagination (1.3.0) ----------------- */

/* Every link on a section page jumps here; leave room for a sticky header. */
.lt-catalog {
  scroll-margin-top: var(--lt-scroll-offset, 6rem);
}

/* 1.3.1: label on its own line; then the compact search field (results update
   as the visitor types -- assets/catalog-search.js) and, when a search is
   active, Clear search beside it (beneath it on a phone). */
.lt-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}
.lt-search__label {
  display: block;
  flex-basis: 100%;
  margin: 0;
  font-weight: 700;
}
/* About a quarter of the content width on a desktop -- never narrower than
   18rem, so on a tablet it is wider than a quarter -- and the full width on a
   phone. */
.lt-search__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: max(25%, 18rem);
  max-width: 100%;
}
@media (max-width: 37.4375rem) {
  .lt-search__row {
    width: 100%;
  }
}

/* WHY THESE SELECTORS START WITH THE CATALOG'S ID. A WordPress block theme
   can style every form control on the page with a long, highly specific
   selector -- laffertytravel.com's "contrast fallback" styles use
   `body .wp-site-blocks input:not(...)x8` and
   `.wp-site-blocks button[type="submit"]` -- and when its colour variables
   are undefined, as they are there, those declarations collapse to nothing:
   no border on the field. Scoping our rules
   to the catalog's id outranks any such class/attribute chain without
   !important, and the --lt-* properties remain the way a theme styles us. */
:is(#lt-results-gear, #lt-results-marketplace, #lt-results-your-way, #lt-results-content)
  .lt-search__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  /* Always visible, not only on focus. */
  border: 2px solid var(--lt-search-border, var(--lt-filter-fg, #0d2845));
  border-radius: 999px;
  background: var(--lt-filter-bg, #fff);
  color: var(--lt-text-color, #111);
  font: inherit;
  box-shadow: none;
  box-sizing: border-box;
}
:is(#lt-results-gear, #lt-results-marketplace, #lt-results-your-way, #lt-results-content)
  .lt-search__input:hover {
  border-color: var(--lt-search-border-hover, var(--lt-btn-bg-hover, #164a7d));
}
.lt-search__clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--lt-filter-fg, #0d2845);
  font-weight: 600;
}

.lt-results-summary {
  margin: 0 0 1rem;
  color: var(--lt-notice-fg, #374151);
}

.lt-pagination {
  margin: 1.75rem 0 0;
}
.lt-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lt-pagination__list li {
  margin: 0;
}
.lt-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The link is a flex container, which drops the literal space between the
     ‹ › arrow and its word; the gap puts it back. */
  gap: 0.35em;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem;
  border: 2px solid var(--lt-filter-fg, #0d2845);
  border-radius: 999px;
  background: var(--lt-filter-bg, #fff);
  color: var(--lt-filter-fg, #0d2845);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}
a.lt-pagination__link:hover {
  text-decoration: underline;
}
.lt-pagination__link[aria-current="page"] {
  background: var(--lt-filter-current-bg, #0d2845);
  border-color: var(--lt-filter-current-bg, #0d2845);
  color: var(--lt-filter-current-fg, #fff);
}
/* Previous/Next on the first/last page: visible, but plainly not a link. */
.lt-pagination__link[aria-disabled="true"] {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--lt-disabled-fg, #6b7280);
}
.lt-pagination__gap {
  padding: 0 0.25rem;
}

.lt-search__clear:focus-visible,
.lt-pagination__link:focus-visible {
  outline: 3px solid var(--lt-focus, #0d2845);
  outline-offset: 3px;
}
/* Scoped like the controls above, so a host page cannot remove the ring. A
   focused field also takes the stronger border, on top of the ring. */
:is(#lt-results-gear, #lt-results-marketplace, #lt-results-your-way, #lt-results-content)
  .lt-search__input:focus-visible {
  outline: 3px solid var(--lt-focus, #0d2845);
  outline-offset: 3px;
}
:is(#lt-results-gear, #lt-results-marketplace, #lt-results-your-way, #lt-results-content)
  .lt-search__input:focus {
  border-color: var(--lt-focus, #0d2845);
}

/* ---- utilities ---------------------------------------------------------- */

.lt-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lt-card__button,
  .lt-filter__link {
    transition: none;
  }
}

@media (forced-colors: active) {
  .lt-card {
    border: 1px solid CanvasText;
  }
  .lt-card__button,
  .lt-filter__link {
    border: 2px solid ButtonText;
  }
  .lt-filter__link[aria-current="page"] {
    outline: 2px solid Highlight;
  }
  .lt-search__input,
  .lt-pagination__link {
    border: 2px solid ButtonText;
  }
  .lt-pagination__link[aria-current="page"] {
    outline: 2px solid Highlight;
  }
  .lt-pagination__link[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}