/*
 * File: assets/css/pages.css, the page bodies of the Mammoth theme.
 * Purpose: lays out the theme pages, the store pages of the plex-shop and plex-preorder overrides, the CGC block the
 * product page prints from plex-cgc and the account pages inside the portal layout at 375, 768 and 1280 pixels; every
 * rule keys on a class those templates print.
 * Defines: nothing; rules for the page, store and account classes of the templates
 * Doc: docs/notes/mammothcomics.com/assets/themes/mammoth/assets/css/pages.css.md
 */

.page-intro { --band-padding-block: var(--s-6); }
.page-intro .lead { margin: 0; }

/* About */
.split-copy { display: grid; gap: var(--s-4); }
.split-copy .section-title { max-width: none; }
.split-media { aspect-ratio: 4 / 3; }

.facts {
  display: grid;
  gap: var(--s-5);
}

.fact {
  display: grid;
  gap: var(--s-1);
}

.fact-figure {
  color: var(--color-text-on-ground);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-display);
  line-height: 0.9;
  -webkit-text-stroke: 2px var(--color-ink-950);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--color-ink-950);
}

.fact-words { color: var(--text-2); font-weight: 700; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
  margin-top: var(--s-5);
}

.photo { display: grid; gap: var(--s-2); }
.photo-frame { display: block; aspect-ratio: 1 / 1; }
.photo-caption { color: var(--text-2); font-size: var(--fs-2); font-weight: 500; }
.about-publishers .chips { margin-top: var(--s-4); }
.about-visit .visit-card,
.visit-page .visit-card,
.contact-page .visit-card { margin-top: var(--s-5); }

@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

/* Contact */
.contact-grid { display: grid; gap: var(--s-6); align-items: start; }
.contact-main { display: grid; gap: var(--s-4); }
.contact-main .section-title { max-width: none; }
.contact-bubble { margin-top: var(--s-2); }
.contact-store { display: grid; gap: var(--s-3); }
.contact-store-title { font-size: var(--fs-h3); }
.contact-hours { display: grid; gap: 2px; font-size: var(--fs-2); }
.contact-hours .is-today { font-weight: 700; }
.contact-store .button-row { margin-top: var(--s-2); }

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .contact-store { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
}

/* Events: cards with a date block at the left. */
.events-page .lead { margin-bottom: var(--s-5); }
.events-page .section-title,
.events-past .section-title { margin-bottom: var(--s-5); }

.event-list { display: grid; gap: var(--s-5); }

.event-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: 'date body';
  align-items: start;
  column-gap: var(--s-3);
  padding: var(--s-3);
}

.event-card .card-media { display: none; grid-area: media; }
.event-card .card-body { grid-area: body; padding: 0; }

.event-date {
  display: grid;
  grid-area: date;
  justify-items: center;
  padding: var(--s-2) 0;
  background: var(--current-background-default);
  color: var(--current-text-default);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  line-height: 1;
  text-transform: uppercase;
}

.event-month { font-size: 18px; }
.event-day { font-size: 34px; }

@media (min-width: 768px) {
  .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .event-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: 'media media' 'date body';
    row-gap: var(--s-3);
    padding: 0 0 var(--s-3);
  }

  .event-card .card-media { display: block; }
  .event-card .event-date { margin-left: var(--s-3); }
  .event-card .card-body { padding-right: var(--s-3); }
}

@media (min-width: 1280px) {
  .event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.event-layout { display: grid; gap: var(--s-5); }
.event-image { aspect-ratio: 4 / 3; }
.event-copy { display: grid; gap: var(--s-3); align-content: start; }

.event-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-4);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .event-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .event-layout > .notice { grid-column: 1 / -1; }
}

/* A content page item */
.page-image { margin-bottom: var(--s-5); aspect-ratio: 16 / 9; }

/* Not found */
.notfound-grid {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}

.notfound-burst { width: 140px; font-size: 16px; }
.notfound-bubble { width: 100%; max-width: 720px; display: grid; gap: var(--s-3); }
.notfound-bubble .section-title { max-width: none; }
.notfound-path { color: var(--text-2); font-size: var(--fs-2); }
.notfound-links { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-4); }
.notfound-links .btn { width: 100%; }

@media (min-width: 768px) {
  .notfound-grid { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
  .notfound-burst { width: 180px; font-size: 20px; }
  .notfound-links { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .notfound-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Maintenance and thanks */
.maintenance-bubble,
.thanks-bubble { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }

.maintenance-bubble .section-title,
.thanks-bubble .section-title { max-width: none; }

.thanks-links { margin-top: var(--s-4); }

/* Shop grid and deals */
.chip-nav { margin-bottom: var(--s-5); }

.shop-bar {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.shop-bar .section-title { max-width: none; }
.shop-sort { display: grid; gap: var(--s-1); }

@media (min-width: 768px) {
  .shop-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .shop-sort { min-width: 280px; }
}

.deal-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.deal-card .card-body { gap: var(--s-2); padding: var(--s-5); }
.deal-card .card-title { font-size: var(--fs-5); -webkit-line-clamp: 3; }
.deal-gifts { display: grid; gap: var(--s-1); padding-left: var(--s-5); }

@media (min-width: 768px) {
  .deal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product page: the gallery, the buy box and the phone buy bar. */
.product-grid { display: grid; gap: var(--s-6); align-items: start; }

.gallery-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.gallery-item { aspect-ratio: 2 / 3; }
.gallery-main { grid-column: 1 / -1; }
.gallery-item .art-img { object-fit: cover; }
.gallery > .gallery-main { aspect-ratio: 2 / 3; }

.buybox { display: grid; gap: var(--s-3); }
.buybox .lead { margin: 0; font-size: var(--fs-3); }

.buy-price {
  font-size: calc(var(--fs-5) * 1.25);
  font-weight: 800;
  line-height: 1.1;
}

.buy-price .price-list { margin-left: var(--s-2); font-size: var(--fs-3); }
.buy-form { display: grid; gap: var(--s-4); }
.buy-form .field + .field { margin-top: 0; }
.field-qty .field-control { max-width: 120px; }
.product-copy { padding-top: var(--s-3); }
.preorder-badge.is-page { display: grid; gap: var(--s-2); }

.buy-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--layer-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 64px;
  padding: 0 var(--gutter);
  box-shadow: var(--shadow-1);
}

.buy-bar-price { font-size: var(--fs-5); font-weight: 800; }

@media (min-width: 768px) {
  .product-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .buy-bar { display: none !important; }
}

/* CGC block of the plex-cgc entry site/cert-block in the buy box: the grade figure on the ink fill, the label lines,
   the cert number with its light Copy button, the ink Verify button, the notes and the 2 slab images. */
.cgc-block { display: grid; gap: var(--s-3); padding-top: var(--s-3); }

.cgc-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-4);
}

.cgc-grade,
.cgc-cert,
.cgc-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}

.cgc-figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 64px;
  padding: 0 var(--s-2);
  background: var(--tag-background-graded);
  color: var(--tag-text-light);
  border-radius: var(--r-sm);
  font-size: calc(var(--fs-5) * 1.4);
  font-weight: 800;
  line-height: 1;
}

.cgc-label { font-size: var(--fs-4); font-weight: 700; }

.cgc-lines {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cgc-cert-label {
  color: var(--text-2);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}

.cgc-cert-number { font-family: var(--font-mono); font-size: var(--fs-4); font-weight: 700; }

.cgc-copy,
.cgc-verify-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--target-min);
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.cgc-copy { padding: 0 var(--s-3); background: var(--btn-light); color: var(--on-btn-light); font-size: var(--fs-2); }
.cgc-copy[hidden] { display: none; }
.cgc-verify-link { padding: 0 var(--s-4); background: var(--button-background-ink); color: var(--color-text-on-ground); }
.cgc-enter { color: var(--text-2); font-size: var(--fs-2); }

.cgc-notes { display: grid; gap: var(--s-1); margin: 0; }
.cgc-notes dt { font-weight: 700; }
.cgc-notes dd { margin: 0 0 var(--s-2); color: var(--text-2); }

.cgc-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.cgc-image { margin: 0; }
.cgc-image img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--bg-alt); }

@media (hover: hover) {
  .cgc-copy:hover { background: var(--btn-light-hover); color: var(--on-btn-light); }
  .cgc-verify-link:hover { background: var(--button-background-ink-hover); color: var(--color-text-on-ground); }
}

/* Lines of the cart, the checkout summary and the order pages. */
.line-list,
.order-lines { display: grid; gap: var(--s-3); }

.line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: var(--border-panel) solid var(--card-border-default);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}

.line-cover {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: 2px;
}

.line-main { display: grid; gap: var(--s-1); align-content: start; }
.line-title,
.order-line-title { color: var(--text); font-weight: 700; line-height: var(--lh-tight); }
.line-variant,
.order-line-variant,
.line-unit { color: var(--text-2); font-size: var(--fs-2); }
.line-total { grid-column: 2; font-size: var(--fs-4); font-weight: 800; }
.line-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.line-step { margin: 0; }

.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--btn-light);
  color: var(--on-btn-light);
  border-radius: var(--r-sm);
}

.stepper .btn-icon { color: var(--on-btn-light); font-size: 16px; }
.stepper-qty { min-width: 32px; font-weight: 800; text-align: center; }
.line-remove { color: var(--text); font-size: 18px; }

@media (min-width: 768px) {
  .line { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; }
  .line-total { grid-column: 3; grid-row: 1; }
}

.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.order-line + .order-line { border-top: 1px solid var(--line); }
.order-line-main { display: grid; gap: var(--s-1); }
.order-line-qty { color: var(--text-2); font-weight: 500; }
.order-line-total { font-weight: 800; }

.totals { display: grid; gap: var(--s-2); margin-top: var(--s-4); }

.totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.totals-row dt { color: var(--text-2); }
.totals-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals-save dd { color: var(--text); }

.totals-total {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 2px solid var(--line);
  font-size: var(--fs-5);
}

.totals-total dt { color: var(--text); font-weight: 800; }

/* Cart */
.cart-grid,
.checkout-grid,
.order-grid { display: grid; gap: var(--s-6); align-items: start; }

.cart-main .section-title { margin-bottom: var(--s-4); }
.cart-forms { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.form-card { padding: var(--s-4); background: var(--panel); border: var(--border-panel) solid var(--card-border-default); border-radius: var(--r-md); }
.deal-pending { margin-top: var(--s-4); }
.cart-summary { display: grid; gap: var(--s-3); }

.checkout-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-5) calc(-1 * var(--gutter)) 0;
  padding: var(--s-3) var(--gutter);
}

@media (min-width: 1024px) {
  .cart-grid,
  .checkout-grid,
  .order-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cart-summary,
  .checkout-side,
  .order-side { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
  .checkout-bar { display: none; }
}

/* Checkout */
.checkout-main { display: grid; gap: var(--s-5); }
.checkout-main .form-card + .form-card { margin-top: 0; }
.checkout-pay { display: grid; gap: var(--s-3); }
.rail-block { padding-left: 36px; }
.checkout-side { display: grid; gap: var(--s-4); }

.summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--target-min);
  font-weight: 700;
  cursor: pointer;
}

.summary-lines { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-2); }
.summary-main { display: grid; flex: 1 1 0; gap: var(--s-1); min-width: 0; }
.summary-qty { color: var(--text-2); }
.summary-price { font-weight: 700; }

@media (min-width: 1024px) {
  .summary-box > .summary-toggle { pointer-events: none; }
}

/* Order received and tracking */
.order-main,
.order-side { display: grid; gap: var(--s-5); }
.order-thanks { display: grid; gap: var(--s-3); }
.order-thanks .section-title { max-width: none; }
.order-head { font-size: var(--fs-h3); }

.timeline { display: grid; gap: var(--s-3); }

.timeline-row {
  display: grid;
  gap: var(--s-1);
  padding-left: var(--s-5);
  background-image: radial-gradient(circle, var(--accent) 5px, transparent 6px);
  background-position: left 4px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

.timeline-row time { color: var(--text-2); font-size: var(--fs-2); font-weight: 700; }

.track-grid { display: grid; gap: var(--s-5); max-width: 760px; }
.track-bubble { display: grid; gap: var(--s-3); }
.track-bubble .section-title { max-width: none; }
.track-result { display: grid; gap: var(--s-3); }

/* Register and preorders */
.register-bubble { display: grid; gap: var(--s-3); }
.register-bubble .section-title { max-width: none; }

.terms-list { display: grid; gap: var(--s-3); }

.terms-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: 700;
}

.terms-item i { width: 24px; text-align: center; }

@media (min-width: 768px) {
  .terms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Portal layout: the account menu and the body panel. */
.portal-grid { display: grid; gap: var(--s-5); align-items: start; }
.portal-toggle { width: 100%; justify-content: flex-start; }
.portal-menu { display: none; margin-top: var(--s-2); }
.portal-nav.is-open .portal-menu { display: grid; gap: 2px; }

.portal-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--target-min);
  padding: var(--s-2) var(--s-3);
  color: var(--text);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
}

.portal-link i { width: 20px; text-align: center; }
.portal-link:hover { background: var(--bg-alt); }

.portal-link[aria-current] {
  background: var(--current-background-default);
  color: var(--current-text-default);
}

.portal-body { min-width: 0; }

@media (min-width: 768px) {
  .portal-toggle { display: none; }
  .portal-menu { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
  .portal-link { background: var(--btn-light); color: var(--on-btn-light); }
}

@media (min-width: 1280px) {
  .portal-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .portal-grid.is-single { grid-template-columns: minmax(0, 1fr); }
  .portal-menu { display: grid; gap: var(--s-1); }
}

/* Account pages inside the portal body */
.account-page { display: grid; gap: var(--s-6); }
.account-block { display: grid; gap: var(--s-4); }

.account-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-h3);
}

.account-count { color: var(--text-2); font-family: var(--font-body); font-size: var(--fs-3); font-weight: 700; }
details.account-block > summary { cursor: pointer; list-style-position: inside; }
.order-status-line { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.table-wrap { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.data-table th,
.data-table td { padding: var(--s-3); text-align: left; }
.data-table thead th { color: var(--text-2); font-size: var(--fs-1); letter-spacing: var(--tracking-tag); text-transform: uppercase; }
.data-table tbody tr { border-top: 1px solid var(--line); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.pill-neutral { background: var(--btn-light); color: var(--on-btn-light); }

.preorder-rows { display: grid; gap: var(--s-3); }

.preorder-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.preorder-row + .preorder-row { border-top: 1px solid var(--line); }
.preorder-main { display: grid; gap: var(--s-2); align-content: start; }
.preorder-title { font-weight: 700; line-height: var(--lh-tight); }
.preorder-price { font-weight: 800; }
.preorder-copies { color: var(--text-2); font-weight: 500; }
.preorder-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }

.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }

.confirm-panel {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-4);
  border: var(--border-panel) solid var(--card-border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}

.confirm-title { font-weight: 800; }