/* ============================================
   About Our Partners — grid + cards
   Append to dwd-eveny-child/style.css
   Swap hex values below for exact brand values
   ============================================ */

:root {
  /* exact brand values — match theme.json presets used by the HP cards */
  --dwd-blue: #416DED;
  --dwd-teal: #52D3B0;
  --dwd-green: #57E449;
  --dwd-navy: #191C3C;
}

/* --- Intro --- */
/* The intro group spans the full content column (so WP centres it in line
   with the grid); the 500px cap sits on its children, which the group's
   own justifyContent:left pins to the column's left edge. */
.partners-intro { padding: 4rem 0 3rem; }
.partners-intro > * { max-width: 500px; }

/* 70px side gutters as padding on the page container. WP's constrained
   layout then centres the content column (max-width + margin auto on
   .partners-page > *) inside the padded box — gutters guaranteed below
   1360px+140px viewports, true centring above. No margin fight, no wrapper. */
.partners-page {
  padding-left: 70px;
  padding-right: 70px;
}

.partners-intro .eyebrow {
  font-family: 'ocr-b-std', monospace; /* match site date/mono font */
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: var(--dwd-navy);
  margin-bottom: 1rem;
}

/* --- Grid: equal hierarchy, handles 11 gracefully --- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  padding-bottom: 5rem;
}

/* --- Card --- */
.partner-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 2rem;
  border: 1px solid var(--dwd-navy);
  background: #fff;
  transition: transform 0.25s ease;
}

.partners-grid > .partner-card {
  margin-block-start: 0;
}

.partner-card:hover { transform: translateY(-4px); }

/* Diagonal stripe accent — replicates the HP speaker-card stripe motif.
   Geometry measured from the HP composite (geri-hvr.webp, 725px wide):
   stripes lean 20° from vertical ("/"), horizontal widths 97px stripe /
   42px gap, first stripe crossing the top edge at 72% of the card width.
   Scaled to the ~437px partner card (x0.60) and expressed along the
   gradient axis (x cos20°): 55px stripe / 24px gap, 293px lead-in.
   The block itself is an unskewed rectangle so all its edges stay
   square — ONLY the gradient is angled. Fixed 437px width pinned to the
   right edge keeps the pattern right-anchored (as on HP, where it bleeds
   off the card's right edge) at every card width. Slides in on hover. */
.partner-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 50px; /* stripes stop short of the card's bottom edge */
  right: 0;
  width: 437px;
  transform: translateX(110%);
  transition: transform 0.35s ease;
  z-index: 0;
  /* stripe colour per scheme via --stripe; gaps show the white card.
     Exactly 3 stripes: explicit stops, no repeat. */
  background: linear-gradient(
    110deg,
    transparent 0 293px,
    var(--stripe) 293px 348px,
    transparent 348px 372px,
    var(--stripe) 372px 427px,
    transparent 427px 451px,
    var(--stripe) 451px 506px,
    transparent 506px
  );
}

.partner-card:hover::before { transform: translateX(70px); }

.partner-card.scheme-blue  { --stripe: var(--dwd-blue); }
.partner-card.scheme-teal  { --stripe: var(--dwd-teal); }
.partner-card.scheme-green { --stripe: var(--dwd-green); }

/* Keep content above the stripe */
.partner-card > * { position: relative; z-index: 1; }

/* --- Typography --- */
.partner-role {
  font-family: 'ocr-b-std', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dwd-navy);
  margin: 0 0 0.75rem;
}

.partner-name {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--dwd-navy);
  margin: 0 0 1rem;
  text-transform: uppercase;
}

/* Card featured image (blocks/partners-grid) — replaces the Kadence image
   blocks the hand-built page cards used, which carried their own kb-img CSS.
   10px + the blurb's 10px top margin = 20px image-to-blurb gap. */
.partner-card-img {
  margin: 0 0 10px;
}
.partner-card-img img {
  display: block;
  width: 100%;
  height: auto;
}
.partner-card-img + .partner-blurb.text-dot.green-dot {
  margin-top: 10px;
}

.partner-blurb {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dwd-navy);
  margin: 0 0 auto;   /* pushes link to the bottom */
}

.partner-blurb.text-dot.green-dot{
  font-family: 'articulat-cf', sans-serif;
  font-size: 0.85rem;
  /* Solid plate behind the text so it stays legible when the stripe
     slides under it on hover. Vertical padding is cancelled by equal
     negative margins; the left edge stays on the card's content line so
     the green dot aligns with the image/name above it. */
  background: #ffffffe6;
  padding: 0.4rem 0.6rem 0.4rem 30px;
  margin: -0.4rem 0;
  margin-bottom: auto; /* keep the push that pins the More link to the card bottom */
}

.partner-link {
  margin: 1.5rem 0 0;
}

.partner-link a {
  font-family: 'ocr-b-std', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--dwd-navy);
  padding-bottom: 2px;
}

.partner-link a span { transition: transform 0.2s ease; display: inline-block; }
.partner-card:hover .partner-link a span { transform: translateX(4px); }

/* Make the whole card clickable via its link (progressive enhancement) */
.partner-link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 767px) {
  .partners-page {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================
   Partner detail page (single partner posts)
   Pattern: patterns/partner-detail.php
   Template: templates/single-partner.html
   Same language as the archive cards above.
   ============================================ */
:root {
  --dwd-hairline: #D9DAE2;
  --dwd-muted: #7A7D8C;
}

/* Shared container: back link row, post content, More Partners strip.
   Site-width (1500px) cap, same 70px gutters as the archive. */
.partner-detail,
.partner-content,
.more-partners {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

/* Site-standard type: articulat-cf everywhere in the partner section (headings
   and body inherit it; the ocr-b-std classes override for kickers/meta). */
.partner-detail,
.partner-content,
.more-partners,
.partner-card,
.partners-intro,
.partners-grid {
  font-family: 'articulat-cf', sans-serif;
}

/* Back link */
.pd-backlink {
  margin: 40px 0 26px;
}
.pd-backlink a {
  font-family: 'ocr-b-std', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dwd-navy);
}

/* Hero card — bordered container on the Kadence row wrapper */
.pd-hero-card {
  border: 1px solid var(--dwd-navy);
  background: #fff;
}
.pd-hero-card .kt-inside-inner-col { padding: 48px; }
.pd-name {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  color: var(--dwd-navy);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.ddw-bw img {
  filter: grayscale(1);
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* Logo lockup — never crop a wordmark */
.pd-logo {
  border: 1px solid var(--dwd-navy);
  height: 132px;
  padding: 26px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
}
.pd-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0; /* opt out of any global image rounding */
}

.pd-intro {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.55;
  color: var(--dwd-navy);
  margin-bottom: 2em;
}
.text-dot.pd-bullet { font-size: 16px; }

/* CTA — base button look comes from theme.json settings.custom.button
   (site-wide DWD button: blue, articulat 700, 0 30px 0 0 corner, green hover).
   Here we only add the arrow, out-specifying the parent theme's
   div.wp-block-button .wp-block-button__link var rule. */
.pd-cta div.wp-block-button .wp-block-button__link {
  position: relative;
  padding-right: 65px;
  white-space: nowrap;
  margin-top: 2em;
}
.pd-cta div.wp-block-button .wp-block-button__link::after {
  content: url("/wp-content/themes/dwd-eveny-child/img/arrow-white.svg");
  position: absolute;
  right: 25px;
  top: 17px;
}

/* Navy/lime chevron divider (partner variant of .ddw-chev) */
.ddw-chev--navy { margin: 48px 0; }
.ddw-chev--navy > i:nth-child(odd) {
  background: repeating-linear-gradient(118deg, var(--dwd-navy) 0 5px, transparent 5px 14px);
}
.ddw-chev--navy > i:nth-child(even) {
  background: repeating-linear-gradient(62deg, var(--dwd-green) 0 5px, transparent 5px 14px);
}

/* Section kickers */
.pd-kicker {
  font-family: 'ocr-b-std', monospace;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dwd-navy);
  margin-bottom: 18px;
}

/* At Design Week event rows */
.pd-event {
  border-top: 1px solid var(--dwd-hairline);
  padding: 18px 0;
}
.pd-event-title { margin: 0 0 4px; }
.pd-event-title a {
  font-weight: 700;
  font-size: 18px;
  color: var(--dwd-navy);
  text-decoration: none;
}
.pd-event-meta {
  font-family: 'ocr-b-std', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dwd-muted);
  margin: 0;
}

/* Pull quote */
.pd-quote.wp-block-pullquote {
  border: none;
  border-left: 5px solid var(--dwd-green);
  padding: 0 0 0 26px;
  margin: 52px 0 8px;
  text-align: left;
}
.pd-quote blockquote { margin: 0; padding: 0; border: none; }
.pd-quote p {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  color: var(--dwd-navy);
  margin: 0 0 10px;
}
.pd-quote cite {
  font-family: 'ocr-b-std', monospace;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dwd-muted);
}

/* More Partners strip (blocks/more-partners) */
.more-partners { margin: 64px auto 80px; }
.mp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.partner-role { text-transform: uppercase; }
.mp-viewall a {
  font-family: 'ocr-b-std', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dwd-navy);
}
.more-partners .partners-grid { padding-bottom: 0; }
/* cards are position:relative via .partner-card; the ::after link overlay
   from the archive rules makes each whole card clickable here too */

@media (max-width: 767px) {
  .partner-detail,
  .partner-content,
  .more-partners {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pd-hero-card .kt-inside-inner-col { padding: 24px; }
  .ddw-bw img { height: 260px; }
}