/* Homepage cycle-by-guild matrix.
   Card cells reuse the site-wide card markup (cards.css), sized to match the
   original hand-built homepage: 98vw fixed-layout table, 4.6vw cycle-name
   column, 9.1vw card columns with 9vw cards, 7.2vw mana symbols. */

/* Welcome line leads; the click-instructions line sits below it, slightly
   smaller */
/* The two masthead text blocks read as compact sub-headings: same size and
   weight on both sides, inset from the edges and the logo */
/* Each block is width-capped so its own text wraps to 4 lines;
   text-wrap: balance equalizes the line lengths so the last line is as
   full as the rest instead of trailing off with a couple of words */
.intro-welcome,
.intro-instructions {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

.intro-welcome {
  max-width: 500px;
}

.intro-instructions {
  max-width: 560px;
}

/* Inline icons in the instructions, matching the widgets on the cards */
.intro-icon-cart {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.intro-icon-cycle {
  font-size: 16px;
}

/* Everything in the matrix is viewport-relative, so the table always fits the
   window and shrinks as one piece — never a secondary scroll bar. */
.cycle-matrix-wrap {
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.cycle-matrix {
  --matrix-card-w: 9vw;
  /* 98vw alone can peek past the vertical-scrollbar gutter on narrow
     windows and spawn a horizontal scroll bar; clamp to the real width */
  width: min(98vw, 100%);
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 16px;
}

.cycle-matrix th,
.cycle-matrix td {
  padding: 2px 1px;
  text-align: center;
  vertical-align: middle;
}

.cycle-matrix .matrix-cycle-header,
.cycle-matrix .matrix-cycle-name {
  width: 4.6vw;
}

/* Masthead: welcome copy | logo | how-to in one row, so the cards sit
   closer to the fold. Logo is 25% smaller than the old page's 26vw. */
.home-logo-banner {
  display: flex;
  align-items: center;
  /* equal breathing room outside the text blocks and beside the logo */
  justify-content: space-evenly;
  gap: 1vw;
  width: 100%;
  padding: 6px 1vw 0;
  box-sizing: border-box;
}

.home-logo-main {
  width: 19.5vw;
  height: auto;
  flex: 0 0 auto;
}

/* "Allied   Enemy" pair centered above the mana-symbol bar, like the old
   allied2.png / enemy2.png word images — real text now */
.matrix-allied-enemy {
  display: flex;
  justify-content: center;
  gap: 9vw;
  font-size: clamp(26px, 3vw, 52px);
  font-weight: bold;
  margin: 8px 0 6px;
  /* center over the card columns, not the page — same half-label-column
     shift as the format headings */
  position: relative;
  left: 2.3vw;
}

/* The single page-top mana bar; breathing room before the first cards */
.matrix-header-wrap {
  margin-bottom: 36px;
  padding-bottom: 0;
}

/* Format headings ("Standard Dual Lands", …) center over the card columns,
   not the full page: shift right by half the cycle-label column (4.6vw / 2) */
#headerDiv {
  position: relative;
  left: 2.3vw;
  margin-bottom: 14px;
}

/* Guild column headers: linked mana symbol centered over its card column;
   the guild name lives in the image alt / link title */
.cycle-matrix .matrix-guild-row th a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cycle-matrix .mana {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 7.2vw;
  height: auto;
  transition: opacity 0.15s;
}

.cycle-matrix .matrix-guild-row th a:hover .mana {
  opacity: 0.3;
}

/* Guild name under each symbol — visible anchor text for the color-pair
   pages (stronger internal-link signal than alt text alone) */
.matrix-guild-label {
  display: block;
  margin-top: 2px;
  font-size: clamp(8px, 0.82vw, 13px);
  white-space: nowrap;
}

.cycle-matrix .matrix-guild-row th a:hover .matrix-guild-label {
  text-decoration: underline;
}

.cycle-matrix .matrix-cycle-header {
  font-size: clamp(9px, 1vw, 16px);
  font-weight: normal;
}

/* Cycle name column; sticky so it stays visible if the table scrolls
   horizontally (narrow screens) */
.cycle-matrix .matrix-cycle-name {
  background-color: black;
  font-size: clamp(9px, 1vw, 16px);
  font-weight: normal;
  overflow-wrap: break-word;
}

.cycle-matrix .matrix-cycle-name a {
  color: inherit;
}

/* Card cells: shrink the standard card container down to matrix size */
.cycle-matrix .card-container {
  --card-w: var(--matrix-card-w);
  --card-h: calc(var(--matrix-card-w) * 1.4);
  height: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

/* cards.css promotes every card to its own GPU layer (will-change +
   translateZ) for hover smoothness. With 400+ cards in one table that
   exhausts the compositor's layer budget and tiles stop rasterizing —
   cards go blank until a hover forces a repaint. Demote them here; the
   :hover rule in cards.css still applies its transform when needed. */
.cycle-matrix .card-inner-wrapper,
.cycle-matrix .card-front {
  will-change: auto;
  transform: none;
}

/* Cards get the same treatment as everywhere else — price footer, set code,
   name pill, cart star — at the same sizes as other pages (cards.css /
   favorites.css defaults apply unmodified). The only concession to the
   narrower cards: the alternate-printings slot (never populated in matrix
   cells) is dropped and the footer uses the full card width, so the
   full-size price isn't needlessly truncated. */
/* The footer scales with the card (1.25vw = the site-standard 20px at a
   1600px window, shrinking in proportion below that). !important because
   mobile.css pins .card-footer/.price-link sizes with !important at narrow
   widths — inside the matrix, proportional sizing must win. */
.cycle-matrix .card-footer {
  width: 100%;
  padding: 1px 2px;
  gap: 2px;
  font-size: clamp(9px, 1.25vw, 20px) !important;
}

.cycle-matrix .card-footer .price-link {
  font-size: inherit !important;
}

.cycle-matrix .card-footer .vendor-icon {
  width: clamp(10px, 1.5vw, 24px) !important;
  margin-right: 2px;
}

/* The alternate-printings slot: slightly narrower than the site default so
   the full-size price still fits, and collapsed entirely until the ⟳ button
   arrives (it's injected client-side once the card's print list loads) */
/* The slot keeps its width even before the ⟳ button arrives (it's fetched
   as cards approach the viewport): reserving the space up front means the
   price never shifts when the button lands. */
.cycle-matrix .card-footer .cycle-slot {
  width: clamp(12px, 1.25vw, 20px);
  min-width: clamp(12px, 1.25vw, 20px);
  flex: 0 0 clamp(12px, 1.25vw, 20px);
}

/* Lazy-loaded card images reserve their aspect ratio, so rows never grow
   (pushing everything below) as images arrive during scrolling */
.cycle-matrix .card-image {
  aspect-ratio: 488 / 680;
}

/* Set per-card by enhanceStaticCards() when the price would truncate: the
   whole set slot yields (it reserves min-width even when its text is hidden),
   so the full price gets all remaining space */
.cycle-matrix .card-footer.footer-tight .set-slot {
  display: none;
}

/* Cart star pinned to the card's top-right corner at every size
   (site default positions it for full-size cards) */
.cycle-matrix .mg-fav-star {
  top: 4px;
  right: 4px;
}

.cycle-matrix .card-footer .cycle-btn {
  padding: 0 2px;
}

/* A cycle with no land for this color pair */
.cycle-matrix .matrix-nocard {
  display: block;
  width: var(--matrix-card-w);
  height: auto;
  margin: 0 auto;
}

/* Below ~760px the footer font hits its 9px floor and stops shrinking with
   the card, so the full price + set code no longer both fit: keep the price,
   drop the set code. */
@media screen and (max-width: 760px) {
  .cycle-matrix .card-footer .set-slot {
    display: none;
  }
}

/* Narrower still, the vendor icon goes too — the price is the one thing the
   footer must always show in full */
@media screen and (max-width: 660px) {
  .cycle-matrix .card-footer .vendor-icon {
    display: none !important;
  }
}

/* Narrow windows: stack the masthead columns (phones redirect to the
   mobile site before this matters) */
@media screen and (max-width: 900px) {
  .home-logo-banner {
    flex-direction: column;
    gap: 8px;
  }

  .home-logo-main {
    width: 45vw;
    order: -1;
  }
}