/* Public-only refinements for landing-card balance and the Quotes page. */

/* Make card 01 exactly match the width of cards 04 and 06. With a 14px row gap,
 * reserving half of the two-card row width keeps the left edge consistent. */
.public-home-page .public-card-row--top {
  grid-template-columns: calc((100% - 14px) / 2) minmax(0, 1fr) minmax(0, 1fr);
}

/* Landing cards intentionally stay dark navy in both site themes. The global
 * theme layer can otherwise wash these cards out in light mode. Keep this
 * override scoped to the new public landing cards only. */
:root[data-mithrandir-theme="active"] .public-home-page .public-card {
  border-color: rgba(210, 173, 82, 0.20);
  background: #16324d;
  color: #fff;
}

:root[data-mithrandir-theme="active"] .public-home-page .public-card--feature {
  background: #16324d;
  box-shadow: none;
}

:root[data-mithrandir-theme="active"] .public-home-page .public-card--about {
  background: #112b43;
}

:root[data-mithrandir-theme="active"] .public-home-page .public-card h2 {
  color: #fff;
}

:root[data-mithrandir-theme="active"] .public-home-page .public-card p {
  color: rgba(255, 255, 255, 0.70);
}

:root[data-mithrandir-theme="active"] .public-home-page .public-card .eyebrow,
:root[data-mithrandir-theme="active"] .public-home-page .public-card-action {
  color: var(--theme-maize-pale, #eee2bd);
}

:root[data-mithrandir-theme="active"] .public-home-page a.public-card:hover,
:root[data-mithrandir-theme="active"] .public-home-page a.public-card:focus-visible {
  border-color: rgba(210, 173, 82, 0.55);
  background: #193b59;
}

/* Quotes landing page */
.quotes-page .quotes-intro {
  padding: 34px clamp(38px, 5vw, 72px) 18px;
}

.quotes-page .quotes-intro h1 {
  margin: 8px 0 8px;
  color: var(--theme-text, var(--navy-900));
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 1;
}

.quotes-page .quotes-intro p {
  margin: 0;
  color: var(--theme-text-muted, #607387);
  font-size: 15px;
}

.quotes-page .quote-display-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 16px;
  padding: 8px clamp(38px, 5vw, 72px) 60px;
}

.quotes-page .quote-display-card {
  min-width: 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--theme-maize, #d2ad52) 22%, transparent);
  border-radius: 12px;
  background: var(--theme-navy-800, #1d3c59);
  color: var(--theme-rail-text, #fff);
}

.quotes-page .quote-display-card--today {
  background: var(--theme-navy-900, #132d46);
}

.quotes-page .quote-display-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
}

.quotes-page .quote-display-heading .eyebrow {
  color: var(--theme-maize-pale, #eee2bd);
  opacity: .82;
}

.quotes-page .quote-display-heading time {
  color: color-mix(in srgb, var(--theme-rail-text, #fff) 58%, transparent);
  font-size: 11px;
}

/* theme-pages.css contains a global themed blockquote rule that loads after
 * this stylesheet. This selector deliberately wins so quote text remains high
 * contrast on the dark quote cards in both light and dark modes. */
:root[data-mithrandir-theme="active"] .quotes-page .quote-display-card blockquote {
  margin: 24px 0 22px;
  color: var(--theme-rail-text, #fff);
  font-family: var(--serif);
  font-size: clamp(27px, 2.6vw, 40px);
  font-style: italic;
  line-height: 1.2;
}

:root[data-mithrandir-theme="active"] .quotes-page .quote-display-attribution {
  margin: 0;
  color: var(--theme-maize-pale, #eee2bd);
  font-size: 13px;
}

.quotes-page .quote-display-card--error {
  margin: 8px clamp(38px, 5vw, 72px);
}

@media (min-width: 1041px) {
  .quotes-page .quote-display-grid {
    flex: 0 0 auto;
  }
}

@media (max-width: 1040px) {
  .public-home-page .public-card-row--top {
    grid-template-columns: 1fr 1fr;
  }

  .quotes-page .quote-display-grid {
    grid-template-columns: 1fr;
  }
}

/* Portrait-sized viewports: every destination card gets the full content width.
 * iPhone landscape remains above this breakpoint and keeps the accepted two-column
 * composition with card 01 spanning both columns. */
@media (max-width: 720px) {
  .public-home-page .public-card-row--top,
  .public-home-page .public-card-row--double {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-home-page .public-card-row--top .public-card,
  .public-home-page .public-card-row--double .public-card,
  .public-home-page .public-card-row--top .public-card:first-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .quotes-page .quotes-intro {
    padding: 24px 20px 14px;
  }

  .quotes-page .quote-display-grid {
    padding: 6px 16px 28px;
  }

  .quotes-page .quote-display-heading {
    display: block;
  }

  .quotes-page .quote-display-heading time {
    display: block;
    margin-top: 5px;
  }
}