/* ============================================================
   Signature Stories: the card grid (signature-stories.html) and
   the story page (stories/<slug>.html). Card base styles are in
   the page's own stylesheet; this adds the link behaviour and the
   story page. Logical properties, so Arabic needs no overrides.
   ============================================================ */

.stories-wrap[hidden], .stories-soon[hidden] { display: none; }
a.story-card { color: inherit; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
a.story-card:hover { transform: translateY(-3px); border-color: rgba(240, 83, 35, 0.4); box-shadow: 0 22px 48px -30px rgba(20, 22, 26, 0.45); }
a.story-card:focus-visible { outline: 3px solid rgba(240, 83, 35, 0.45); outline-offset: 2px; }
.story-card__media--cover { height: 200px; padding: 0; overflow: hidden; }
.story-card__media--cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.story-card__logo {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.story-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-card .link-more { margin-top: auto; padding-top: 12px; }
@media (max-width: 1000px) { .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stories-grid { grid-template-columns: minmax(0, 1fr); } }

/* the home page's story carousel cards link to their story */
.story-preview-card { position: relative; }
.story-preview-card__link { position: absolute; inset: 0; z-index: 2; }

/* ---- story page ---- */
.story-hero { padding-top: 112px; padding-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 700px) { .story-hero { padding-top: clamp(150px, 11vw, 190px); } }
.story-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-top: 28px; }
.story-hero__industry { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.story-hero h1 {
  margin-top: 10px;
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
}
.story-hero__summary { margin-top: 16px; max-width: 720px; font-size: 1.375rem; line-height: 1.55; color: var(--ink-2); }
.story-hero__logo {
  display: grid;
  place-items: center;
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
}
.story-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.story-cover { margin: 0 auto; }
.story-cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 16px; }

.story .stories-stats { margin-top: clamp(40px, 5vw, 64px); }
.story-body { max-width: 860px; padding-block: clamp(48px, 6vw, 88px); }
.story-body section + section { margin-top: 44px; }
.story-body h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.2; color: var(--ink); }
.story-quote {
  margin: 56px 0 0;
  padding: clamp(28px, 4vw, 44px);
  background: #053030;
  border-radius: 16px;
  color: var(--paper-warm);
}
.story-quote p { font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.45; }
.story-quote p::before { content: "\201C"; }
.story-quote p::after { content: "\201D"; }
.story-quote footer { margin-top: 18px; font-size: 1rem; font-weight: 700; opacity: 0.8; }

.story-gallery { padding-bottom: clamp(56px, 7vw, 96px); }
.story-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-gallery__grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }

@media (max-width: 760px) {
  .story-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .story-hero__logo { order: -1; width: 112px; }
  .story-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}