/*
  Styles of the /media page (SMC-346).

  css/style.min.css is a purged Tailwind build with no source in this repo, so
  a class that no other page uses does not exist there. This file is written
  by hand and holds only what media.html needs on top of it. The values are
  the landing's own: the page background, the card of the reviews and the
  blog (panel, hairline border, 21px radius), the white button of the hero
  (10px radius) and the outlined button of the footer (7px radius). The h1 and
  h2 sizes come from style.min.css and are not repeated here.
*/

.media {
  --m-black: #020403;
  --m-graphite: #171717;
  --m-panel: #131815;
  --m-line: #1C241F;
  --m-white: #F2F1EF;
  --m-grey: #929291;
  --m-soft: rgb(242 241 239 / 0.3);
}

.media__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 16px 120px;
  color: var(--m-white);
}

/* style.min.css sets a dark colour on every element (`* { color: #131313 }`),
   so nothing inherits. Inside the page, text takes its parent's colour again;
   :where() keeps this weaker than the site's own h1 and h2 rules. */
:where(.media__inner *) {
  color: inherit;
}

.media-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.media a:focus-visible,
.media button:focus-visible {
  outline: 2px solid var(--m-white);
  outline-offset: 3px;
}

/* The header is fixed: keep anchors and focused controls clear of it. */
.media [id],
.media a,
.media button {
  scroll-margin-top: 88px;
  scroll-margin-bottom: 24px;
}

/* --- Intro --------------------------------------------------------------- */

.media-hero__lede {
  max-width: 760px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.26px;
  color: var(--m-white);
}

.media-hero__terms {
  max-width: 760px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--m-grey);
}

.media-hero__terms a,
.media-link {
  color: var(--m-white);
  text-decoration: underline;
  text-decoration-color: var(--m-soft);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease-in;
}

.media-hero__terms a:hover,
.media-link:hover {
  text-decoration-color: var(--m-white);
}

.media-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 32px;
}

.media-meta {
  font-size: 14px;
  line-height: 1.4;
  color: var(--m-grey);
  font-variant-numeric: tabular-nums;
}

.media-nav {
  margin-top: 56px;
  padding: 20px 0;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
}

.media-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
}

.media-nav a {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.54px;
  text-transform: lowercase;
  color: var(--m-white);
  transition: opacity 0.3s ease-in;
}

.media-nav a:hover {
  opacity: 0.7;
}

/* --- Sections ------------------------------------------------------------ */

.media-section {
  margin-top: 96px;
}

.media-section__intro,
.media-section__outro {
  max-width: 760px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--m-grey);
}

.media-section__intro strong {
  font-weight: 500;
  color: var(--m-white);
}

.media-section__outro {
  margin-top: 24px;
}

.media-group {
  margin-top: 56px;
}

.media-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

.media-group__head h3 {
  font-size: 24px;
  line-height: 1.2;
}

.media-group__head h3 + p {
  max-width: 560px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--m-grey);
}

.media-group__zip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 24px;
}

/* --- Cards and buttons --------------------------------------------------- */

.media-card {
  min-width: 0;
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  border-radius: 21px;
}

.media-card__body {
  padding: 16px;
}

.media-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--m-white);
}

.media-card__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--m-grey);
}

.media-card h3 {
  font-size: 22px;
  line-height: 1.2;
}

.media-label,
.media-card h3.media-label {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.54px;
  text-transform: lowercase;
  color: var(--m-grey);
}

.media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--m-white);
  border-radius: 10px;
  background: var(--m-white);
  color: var(--m-graphite);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.3s ease-in, border-color 0.3s ease-in;
}

.media-btn:hover {
  opacity: 0.75;
}

.media-btn--lg {
  min-height: 56px;
  padding: 0 26px;
  font-size: 17px;
}

.media-btn--ghost {
  border-color: var(--m-soft);
  border-radius: 7px;
  background: transparent;
  color: var(--m-white);
}

.media-btn--ghost:hover {
  opacity: 1;
  border-color: rgb(242 241 239 / 0.7);
}

/* --- Logos --------------------------------------------------------------- */

.media-logo__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px 24px;
  border-radius: 20px;
}

.media-logo__stage--dark { background: var(--m-black); }
.media-logo__stage--light { background: var(--m-white); }
.media-logo__stage--icon { background: var(--m-black); }

.media-logo__stage img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.media-logo--wordmark .media-logo__stage img { max-width: 300px; }
.media-logo--mark .media-logo__stage img { width: auto; height: 104px; }
.media-logo--icon .media-logo__stage img { width: 120px; height: 120px; }

.media-logo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.media-logo__row + .media-logo__row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--m-line);
}

.media-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.media-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--m-soft);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--m-white);
  transition: border-color 0.3s ease-in;
}

.media-size:hover {
  border-color: rgb(242 241 239 / 0.7);
}

/* --- Colours ------------------------------------------------------------- */

.media-swatch {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
}

.media-swatch__colour {
  min-height: 104px;
  border-radius: 20px;
  /* Keeps the black and the panel swatch visible on the card. */
  box-shadow: inset 0 0 0 1px rgb(242 241 239 / 0.1);
}

.media-swatch .media-card__note {
  margin-top: 6px;
}

.media-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--m-line);
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--m-white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease-in;
}

.media-copy:hover,
.media-copy.is-copied {
  border-color: var(--m-soft);
}

.media-copy__state {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.54px;
  text-transform: lowercase;
  color: var(--m-grey);
}

.media-copy.is-copied .media-copy__state {
  color: var(--m-white);
}

/* --- Typography ---------------------------------------------------------- */

.media-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}

.media-card.media-type h3 {
  margin-top: 12px;
  font-size: 34px;
  line-height: 1.15;
}

.media-type__specimen {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--m-white);
}

.media-type .media-card__note {
  margin: 16px 0 20px;
}

.media-type .media-btn {
  margin-top: auto;
}

/* --- Name and copy, contact ---------------------------------------------- */

.media-texts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.media-text,
.media-contact {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.media-text__value {
  margin-top: 12px;
  font-family: 'Golos Text', sans-serif;
  font-size: 24px;
  line-height: 1.25;
  color: var(--m-white);
  overflow-wrap: anywhere;
}

.media-text__value--long {
  max-width: 860px;
  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.media-text__value a {
  transition: opacity 0.3s ease-in;
}

.media-text__value a:hover {
  opacity: 0.7;
}

.media-text__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}

.media-text__foot .media-card__note {
  min-width: 0;
  overflow-wrap: anywhere;
}

.media-text__foot .media-btn {
  flex: none;
}

/* --- Banners ------------------------------------------------------------- */

.media-banner {
  display: flex;
  flex-direction: column;
}

.media-banner__stage {
  position: relative;
  border-radius: 20px;
  background: var(--m-black);
  overflow: hidden;
}

.media-banner--wide .media-banner__stage { aspect-ratio: 1200 / 630; }
.media-banner--square .media-banner__stage { aspect-ratio: 1 / 1; }
.media-banner--story .media-banner__stage { height: 440px; }

.media-banner__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-banner__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.media-banner__body .media-card__note {
  margin-top: 6px;
}

.media-banner__get {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Usage terms --------------------------------------------------------- */

.media-rules__card {
  padding: 24px;
}

.media-rules__list {
  margin-top: 18px;
}

.media-rules__list li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--m-white);
}

.media-rules__list li + li {
  margin-top: 14px;
}

.media-rules__list li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain;
}

/* The check mark the landing already uses in its address table. */
.media-rules__list--do li::before {
  background-image: url('../images/icons/green-circle-checkmark.svg');
}

.media-rules__list--dont li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10.24' cy='10.24' r='8.5' stroke='%23929291' stroke-width='1.5'/%3E%3Cpath d='M7 7l6.5 6.5M13.5 7L7 13.5' stroke='%23929291' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --- Wider screens ------------------------------------------------------- */

@media (min-width: 600px) {
  .media-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-swatch { display: block; }
  .media-swatch .media-card__note { min-height: 42px; }
}

@media (min-width: 768px) {
  .media-hero__lede { font-size: 22px; line-height: 1.5; }
  .media-section { margin-top: 140px; }
  .media-section__intro,
  .media-section__outro { font-size: 18px; }
  .media-group__head h3 { font-size: 28px; }
  .media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-logo__stage { min-height: 240px; }

  .media-texts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .media-text { grid-column: span 6; }
  .media-text--name,
  .media-text--bot,
  .media-text--site,
  .media-text--tagline { grid-column: span 3; }

  /* Two wide banners to a row; the square and the story share the last half row
     and take the height the LinkedIn banner gives it. */
  .media-banners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-banner--wide { grid-column: span 2; }
  .media-banner--square .media-banner__stage,
  .media-banner--story .media-banner__stage {
    flex: 1 1 0;
    height: auto;
    min-height: 200px;
    aspect-ratio: auto;
  }
  .media-banner--square .media-banner__body,
  .media-banner--story .media-banner__body { flex: none; }
}

@media (min-width: 1024px) {
  .media-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-text--name,
  .media-text--bot,
  .media-text--site { grid-column: span 2; }
  .media-text--description { grid-column: span 3; }
}