@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 10.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   10. PUBLICATION CARDS — books with prices
   ============================================================ */

.publication {
  position: relative;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  padding: var(--space-md);
  background-color: var(--colour-bg-card);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: var(--transition-colour), box-shadow var(--duration-base) var(--ease-out);
}

.publication:hover {
  border-color: var(--colour-rule-accent);
  box-shadow: var(--shadow-card);
}

.band .publication {
  background-color: var(--paper);
  border-color: var(--cream-400);
}

@media (min-width: 30em) {
  .publication {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg);
  }
}

/* -- Cover: a cream tile standing in for the jacket ----------- */
.publication__cover {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--space-sm);
  aspect-ratio: 2 / 3;
  width: min(100%, 9rem);
  padding: var(--space-sm);
  background-color: var(--cream-100);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

/* The spine — a burgundy band down the binding edge. */
.publication__cover::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--space-2xs);
  background-color: var(--burgundy-600);
}

.publication__cover-arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-lg);
  line-height: var(--leading-arabic-inline);
  color: var(--burgundy-600);
  text-align: center;
  direction: rtl;
  padding-inline-start: var(--space-2xs);
}

.publication__cover-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  color: var(--ink-800);
  line-height: var(--leading-snug);
  padding-inline-start: var(--space-2xs);
}

.publication__cover-rule {
  height: var(--rule-hairline);
  background-color: var(--cream-400);
  margin-inline-start: var(--space-2xs);
}

.publication__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.publication__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

.publication__title a {
  color: inherit;
}

.publication__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.publication__author {
  font-size: var(--text-sm);
  color: var(--colour-text-meta);
  font-style: italic;
}

.publication__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}

.publication__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.publication__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* Pinned to the foot of the card so prices align across a row. */
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--border-hairline);
}

.publication__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: lining-nums;
  color: var(--colour-heading);
  line-height: var(--leading-flat);
}

.publication__price-note {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--colour-text-meta);
  margin-top: var(--space-3xs);
}

/* The order button must outrank the card-wide title link. */
.publication__order {
  position: relative;
  z-index: var(--z-raised);
}

.publication__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-raised);
}

/* Reserve the badge's corner so the top line of the body cannot run
   under it. That top line is the category label where there is one,
   and the title where there is not, so the rule targets whichever
   element actually opens the body. */
.publication:has(.publication__badge) .publication__body > :first-child {
  padding-right: calc(var(--space-2xl) + var(--space-xs));
}

/* -- Cover image (an addition to the mockup) -------------------
   A publication with a cover image shows it in place of the drawn
   cover, in the same frame and at the same 2:3 ratio. The drawn
   spine and the tile's padding are left off: a photographed cover
   has its own. */
.publication__cover--image {
  padding: 0;
}

.publication__cover--image::before {
  content: none;
}

/* Laid over the whole frame rather than sized as a grid item, whose
   percentage height rounds short and leaves a line of tile showing. */
.publication__cover--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- "How to order" box (an addition to the mockup) -----------
   The mockup's note holds one paragraph (.note p has no margin).
   On a book's page it holds the availability, the instructions and
   the Order button, so each is spaced as a step of its own, the
   button furthest, as the call to action. */
.note.note--order > * + * {
  margin-top: var(--space-sm);
}

.note.note--order > .note__title + * {
  margin-top: 0; /* the title's own margin-bottom, --space-2xs */
}

.note.note--order > .note__action {
  margin-top: var(--space-md);
}