/* =============================================================================
   Del Plaza — guarantee
   The Del Plaza Guarantee — the page that states, in full, what every item in
   the emporium is held to. The homepage states the promise as three pillars of a
   sentence each; this is the long form of it.

   The page is the house's own frame — the header and the footer of
   _base.html.twig — and this sheet paints only the field between them. Its
   ground is the document's Parchment Cream; the masthead is Cognac so the page
   opens warm and with weight, and the articles stand beneath it in ink.

   Univers only, and no second family anywhere. The hierarchy is built the way
   the house builds it: the masthead takes the Black Italic the page titles wear,
   the article titles take the upright Bold as a statement of fact, the opening
   line of each article takes the Italic as a maxim, and the body takes the Roman
   at a comfortable measure. No letter spacing is set (docs/design.md): the
   font's own spacing is the only spacing.

   The palette is the permitted nine and nothing else. On the Cognac masthead the
   page's name is Parchment Cream (4.35:1 — at or above the 3:1 large text needs)
   and the overline is Golden Milk (3.46:1 — under the 4.5:1 a normal line needs,
   flagged with the design). On the light ground no body ink is Cognac: it reads
   4.35:1 there, so it is spent on the rail numeral and the masthead hem, where
   it is large or decorative. The articles are Deep Navy (7.99:1) and Slate
   Charcoal (5.95:1), at or above WCAG AA.
   ============================================================================= */

/* =============================================================================
   1. Canvas
   The masthead runs to the header, so the page's own top padding is given up;
   the document's ground stands behind everything else.
   ============================================================================= */
.guarantee-page {
  padding-top: 0; /* the masthead is the page's first surface, flush to the header */
}

/* =============================================================================
   2. Masthead — the house's voice
   Cognac to its own edges, a faint Deep Navy tartan woven over it, the
   overline in Golden Milk and the page's name in the Black Italic the other page
   titles wear, with the shield held at the far right. A Golden Milk rule closes
   it, sized to read as a deliberate gilded hem rather than a hairline.
   ============================================================================= */
.guarantee-masthead {
  background-color: var(--cognac);
  /* A faint tartan, laid over the Cognac: broad and narrow Deep Navy bands
     crossed both ways, with one thin Golden Milk thread run through the sett —
     a broad band at 96px, a narrow at 24px, the thread at 48px. It is the
     crossing that makes the plaid, and the alphas are held low so the field
     reads as woven cloth under the name and never as a pattern. Drawn in CSS:
     no image, no request, nothing to fail. */
  background-image:
    repeating-linear-gradient(90deg, rgba(236, 217, 172, 0.16) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(236, 217, 172, 0.16) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(60, 71, 122, 0.06) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(0deg, rgba(60, 71, 122, 0.06) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(60, 71, 122, 0.09) 0 48px, transparent 48px 96px),
    repeating-linear-gradient(0deg, rgba(60, 71, 122, 0.09) 0 48px, transparent 48px 96px);
  color: var(--color-content-on-dark);
  padding: var(--spacing-xxxl) 0 var(--spacing-xxl);
  border-bottom: 3px solid var(--golden-milk);
}

.guarantee-overline {
  display: inline-block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-sm);
}

.guarantee-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.guarantee-masthead__text {
  min-width: 0;
}

.guarantee-masthead__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  color: var(--parchment-cream);
  margin: 0;
  max-width: 20ch;
}

/* The mark of the promise — the shield, struck in Golden Milk, held at the far
   right of the masthead and scaled to sit against the page's name. Decorative
   only; the name carries the meaning. */
.guarantee-masthead__shield {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--golden-milk);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
}

/* =============================================================================
   3. The articles
   One headline, and the copy beneath it. On a wide screen the numeral stands in
   a left rail (the lane) and the title and copy hold the column beside it; the
   copy is set to its own measure and left to hang short of the column's edge, so
   the whitespace to the right is a lane too.
   ============================================================================= */
.guarantee-articles {
  padding: var(--spacing-xxl) 0 var(--spacing-lg);
}

.guarantee-article {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--spacing-sm);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border-primary);
}

.guarantee-article:first-child {
  padding-top: 0;
  border-top: 0;
}

.guarantee-article:last-child {
  padding-bottom: 0;
}

/* The rail numeral — position in the list, not a rank. Decoration, hidden from
   assistive tech in the markup; the title carries the meaning. */
.guarantee-article__index {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cognac);
}

.guarantee-article__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  color: var(--deep-navy);
  margin: 0;
  max-width: 24ch;
}

.guarantee-article__copy {
  max-width: 46rem;
}

/* The opening line — the maxim, set larger and in the Italic. */
.guarantee-article__standfirst {
  font-family: var(--font-primary);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--deep-navy);
  margin-bottom: var(--spacing-sm);
}

/* The body — the Roman at a reading measure; the paragraphs are separated by
   air, not by rules. */
.guarantee-article__paragraph {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-content-primary);
  max-width: 68ch;
  margin-bottom: var(--spacing-sm);
}

.guarantee-article__paragraph:last-child {
  margin-bottom: 0;
}

/* The concierge address, where a paragraph carries it — ink and an underline, so
   the way through is legible without leaning on colour alone. */
.guarantee-article__link {
  color: var(--deep-navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s var(--ease-out);
}

.guarantee-article__link:hover {
  color: var(--cognac);
}

/* =============================================================================
   4. Responsive
   ============================================================================= */
@media (min-width: 992px) {
  .guarantee-article {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--spacing-lg);
    row-gap: var(--spacing-md);
  }

  .guarantee-article__index {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .guarantee-article__title {
    grid-column: 2;
    grid-row: 1;
  }

  .guarantee-article__copy {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 767.98px) {
  /* On a phone the text wants more air at the edges than the frame's own gutter
     gives it, so the page's columns stand in from the glass. */
  .guarantee-page .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .guarantee-masthead {
    padding: var(--spacing-xxl) 0 var(--spacing-xl);
  }

  .guarantee-masthead__inner {
    gap: var(--spacing-md);
  }

  .guarantee-article {
    padding: var(--spacing-lg) 0;
  }

  .guarantee-article__title {
    max-width: none;
  }
}