/* Original module artwork and layout. GPL-2.0-or-later. */
.clp-card {
  --clp-text: #f4f7fc;
  --clp-muted: #bdc8dc;
  --clp-line: rgba(199, 214, 238, .17);
  --clp-background: #0e192c;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  border: 1px solid var(--clp-line);
  border-radius: 18px;
  background: linear-gradient(155deg, #1c2e47, var(--clp-background) 65%);
  color: var(--clp-text);
  font-family: inherit;
  text-align: start;
  container: clp-lunar / inline-size;
  box-shadow: 0 10px 30px rgba(7, 17, 34, .18);
}
.clp-card *, .clp-card *::before, .clp-card *::after { box-sizing: border-box; }
.clp-card.clp-layout-horizontal { max-width: 100%; }
.clp-card.clp-border-square { border-radius: 0; }
.clp-card.clp-border-hidden { border: 0; }
.clp-card.clp-theme-custom { background: var(--clp-custom-background); }
.clp-card .clp-body { min-width: 0; }
.clp-card.clp-theme-light {
  --clp-text: #142238;
  --clp-muted: #4c5c71;
  --clp-line: rgba(28, 50, 77, .16);
  --clp-background: #f4f7fc;
  background: linear-gradient(155deg, #fff, var(--clp-background) 65%);
}
.clp-card .clp-card-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 22px 24px 0; }
.clp-card .clp-title { margin: 0; color: var(--clp-text); font-size: 1.18rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.clp-card .clp-date { display: block; margin: 0; flex-shrink: 0; color: var(--clp-muted); font-size: .85rem; text-align: start; }
.clp-card[dir="auto"] .clp-date { width: fit-content; }
.clp-card .clp-media { padding: 12px 24px 0; }
.clp-card .clp-moon { display: block; width: min(100%, 240px); width: min(100%, clamp(140px, 52cqw, 240px)); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .2)); }
.clp-card .clp-moon-rotated { transform: rotate(180deg); }
.clp-card .clp-moon-photo { border-radius: 50%; background: #000; }
.clp-card .clp-content { padding: 2px 24px 22px; }
.clp-card .clp-phase { margin: 0; color: var(--clp-text); font-size: 1.55rem; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.clp-card .clp-phase-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.clp-card .clp-phase-heading > * { min-width: 0; }
.clp-card .clp-location { margin: 0; color: var(--clp-muted); font-size: .95rem; overflow-wrap: anywhere; }
.clp-card .clp-meta { margin: 20px 0 0; }
.clp-card .clp-meta-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--clp-line); }
.clp-card .clp-meta dt, .clp-card .clp-meta dd { margin: 0; font-size: .9rem; line-height: 1.45; }
.clp-card .clp-meta dt, .clp-card .clp-meta dd { min-width: 0; overflow-wrap: anywhere; }
.clp-card .clp-meta dt { color: var(--clp-muted); font-weight: 400; }
.clp-card .clp-meta dd { color: var(--clp-text); text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.clp-card .clp-credit { margin: 17px 0 0; color: var(--clp-muted); font-size: .72rem; line-height: 1.6; }
.clp-notice { padding: 16px; border: 1px solid #bbc8da; border-radius: 8px; background: #f6f8fb; color: #243c57; line-height: 1.5; }
/* Desktop columns can be narrower than the screen: keep a compact horizontal
   card from 400px of usable space, while mobile viewports always stack. */
@media (min-width: 641px) {
  @container clp-lunar (min-width: 400px) {
    .clp-layout-horizontal .clp-body {
      display: grid;
      grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
      grid-template-areas: "moon heading" "moon details";
      grid-template-rows: auto 1fr;
      align-items: center;
    }
    .clp-layout-horizontal .clp-card-heading {
      grid-area: heading;
      padding-block: 18px 10px;
      padding-inline: 8px 18px;
      min-width: 0;
    }
    .clp-layout-horizontal .clp-media {
      grid-area: moon;
      padding-block: 18px;
      padding-inline: 16px 0;
      min-width: 0;
    }
    .clp-layout-horizontal .clp-content {
      grid-area: details;
      padding-block: 0 18px;
      padding-inline: 8px 18px;
      min-width: 0;
      align-self: start;
    }
    .clp-layout-horizontal .clp-title { font-size: 1.05rem; }
    .clp-layout-horizontal .clp-phase { font-size: 1.3rem; }
    .clp-layout-horizontal .clp-meta { margin-top: 12px; }
    .clp-layout-horizontal .clp-meta-row { gap: 10px; padding-block: 7px; }
    .clp-layout-horizontal .clp-meta dt, .clp-layout-horizontal .clp-meta dd { font-size: .85rem; }
    .clp-layout-horizontal .clp-moon { width: min(100%, 220px); width: min(100%, clamp(110px, 28cqw, 220px)); }
  }
  @container clp-lunar (min-width: 600px) {
    .clp-layout-horizontal .clp-body { grid-template-columns: minmax(180px, .85fr) minmax(0, 1.3fr); }
    .clp-layout-horizontal .clp-card-heading { padding-block: 24px 12px; padding-inline: 12px 28px; }
    .clp-layout-horizontal .clp-media { padding-block: 24px; padding-inline: 24px 0; }
    .clp-layout-horizontal .clp-content { padding-block: 0 24px; padding-inline: 12px 28px; }
    .clp-layout-horizontal .clp-title { font-size: 1.18rem; }
    .clp-layout-horizontal .clp-phase { font-size: 1.55rem; }
    .clp-layout-horizontal .clp-meta { margin-top: 16px; }
    .clp-layout-horizontal .clp-meta-row { gap: 16px; padding-block: 9px; }
    .clp-layout-horizontal .clp-meta dt, .clp-layout-horizontal .clp-meta dd { font-size: .9rem; }
  }
}
@container clp-lunar (max-width: 380px) {
  .clp-card .clp-card-heading, .clp-card .clp-phase-heading { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .clp-card .clp-card-heading, .clp-card .clp-phase-heading { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 340px) {
  .clp-card .clp-card-heading { padding: 18px 17px 0; }
  .clp-card .clp-media { padding: 12px 17px 0; }
  .clp-card .clp-content { padding: 2px 17px 18px; }
  .clp-card .clp-meta-row { gap: 10px; }
  .clp-card .clp-meta dt, .clp-card .clp-meta dd { font-size: .8rem; }
}