/* The Thursday Times: the identity's component styles, as the design system ships them (components/bundle.css). */

/* Keyboard focus: a 3 px orange outline, set 3 px away, on every square corner. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tt-focus-width) solid var(--tt-focus);
  outline-offset: var(--tt-focus-offset);
}

/* ---------------------------------------------------------------- logo + label */
.tt-logo { display: inline-block; vertical-align: middle; flex: none; }
.tt-label { display: inline-flex; align-items: center; line-height: 0; vertical-align: middle; }
.tt-label > svg { display: block; flex: none; }
.tt-label--ur { gap: calc(var(--tt-label-cap) * 0.5); line-height: 1; }
.tt-label__ur { font-family: var(--font-urdu); font-weight: 700; font-size: calc(var(--tt-label-cap) * 1.6); line-height: 1; white-space: nowrap; }

/* -------------------------------------------------------------------- buttons */
.tt-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; margin: 0;
  border: 1.5px solid var(--tt-text); border-radius: var(--tt-radius);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; line-height: 1.25;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tt-button--main { background: var(--tt-text); color: var(--tt-bg); }
.tt-button--secondary { background: transparent; color: var(--tt-text); }

.tt-icon { display: block; fill: none; stroke: currentColor; stroke-width: var(--tt-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.tt-icon-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tt-touch-target); height: var(--tt-touch-target); padding: 0; margin: 0;
  border: 0; border-radius: var(--tt-radius); background: transparent; color: var(--tt-text); cursor: pointer; transition: background 150ms ease;
}
.tt-icon-button:hover { opacity: .7; }
.tt-icon-button--framed { width: 56px; height: 56px; border: var(--tt-rule-item-width) solid var(--tt-border); }

/* ------------------------------------------------------------ language switch */
.tt-switch {
  display: inline-grid; grid-template-columns: 1fr 1fr; width: 330px; max-width: 100%;
  height: var(--tt-touch-target); direction: ltr; border-radius: var(--tt-radius);
}
.tt-switch__option {
  appearance: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 var(--tt-space-4);
  border: 0; border-radius: var(--tt-radius); background: transparent; color: var(--tt-text);
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
}
.tt-switch__option--ur { font-family: var(--font-edition, var(--font-urdu)); font-size: 17px; }
.tt-switch__option.is-active { background: var(--tt-text); color: var(--tt-bg); }

/* ---------------------------------------------------------------- site header */
.tt-header { background: var(--tt-bg); color: var(--tt-text); }
.tt-header__bar {
  box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 90px; max-width: var(--tt-max-width); margin: 0 auto; padding: 0 var(--tt-margin-desktop);
  border-bottom: var(--tt-rule-item-width) solid var(--tt-border);
}
.tt-header__start { justify-self: start; display: flex; align-items: center; }
.tt-header__home { display: inline-flex; color: inherit; }
.tt-header__nav { display: flex; gap: var(--tt-space-6); }
.tt-header__link { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--tt-text); text-decoration: none; padding: 10px 0; }
.tt-header__tools { justify-self: end; display: flex; align-items: center; gap: var(--tt-space-5); }
.tt-header__tools .tt-icon-button { margin-inline-end: -10px; }
.tt-header__edition { font-family: var(--font-edition, var(--font-urdu)); font-weight: 600; font-size: 17px; line-height: 24px; color: var(--tt-text); text-decoration: none; padding: 10px 20px 10px 0; margin-inline-end: 4px; border-inline-end: 1px solid var(--tt-border); }
.tt-header__edition:lang(en) { font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.tt-header__phone { display: none; }
.tt-header__date { box-sizing: border-box; max-width: var(--tt-max-width); margin: 0 auto; padding: var(--tt-space-3) var(--tt-margin-desktop) 0; color: var(--tt-text-secondary); font-family: var(--font-ui); }
@media (max-width: 767px) {
  .tt-header__bar { grid-template-columns: 1fr auto 1fr; height: 60px; padding: 0 var(--tt-margin-phone); }
  .tt-header__start { display: contents; }
  .tt-header__start > .tt-header__phone { grid-column: 1; justify-self: start; margin-inline-start: -10px; }
  .tt-header__home { grid-column: 2; justify-self: center; }
  .tt-header__home .tt-logo--wordmark { width: 166px; height: auto; }
  .tt-header__nav, .tt-header__edition, .tt-header__desk { display: none; }
  .tt-header__tools { grid-column: 3; }
  .tt-header__phone { display: inline-flex; }
  .tt-header__date { padding: var(--tt-space-3) var(--tt-margin-phone) 0; }
}

/* --------------------------------------------------------------------- byline */
.tt-byline { margin: 0; color: var(--tt-text-secondary); font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 400; }
.tt-byline > span { unicode-bidi: isolate; } /* a Latin name or a figure inside an Urdu byline keeps its place */
.tt-byline:lang(ur), [lang="ur"] .tt-byline { font-family: var(--font-urdu); }

/* ---------------------------------------------------------------------- story */
.tt-story { display: flex; flex-direction: column; color: var(--tt-text); }
.tt-story__text { display: flex; flex-direction: column; align-items: flex-start; }
.tt-story__picture { margin-bottom: var(--tt-space-3); }
.tt-story__label { margin-bottom: var(--tt-space-3); }
.tt-story__headline { margin: 0; font-family: var(--font-display); }
.tt-story[lang="ur"] .tt-story__headline, .tt-story[lang="ur"] .tt-story__deck { font-family: var(--font-urdu); }
.tt-story__link { color: inherit; text-decoration: none; }
.tt-story__deck { margin: var(--tt-space-5) 0 0; max-width: 25em; font-family: var(--font-text); }
.tt-story__byline { margin-top: var(--tt-space-3); }
.tt-story--xl .tt-story__label { margin-bottom: var(--tt-space-4); }
.tt-story--xl .tt-story__byline { margin-top: var(--tt-space-4); }
.tt-story--l .tt-story__deck { margin-top: var(--tt-space-4); }
.tt-story--s .tt-story__label { margin-bottom: var(--tt-space-2); }
.tt-story--s .tt-story__byline { margin-top: var(--tt-space-2); }
.tt-story--boxed { box-sizing: border-box; padding: 22px; border: var(--tt-rule-item-width) solid var(--tt-border); background: var(--tt-bg); }
.tt-story--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--tt-space-7); align-items: center; }
.tt-story--split .tt-story__picture { margin: 0; }

/* ----------------------------------------------------------------- news strip */
.tt-strip {
  display: grid; grid-template-columns: 2fr repeat(var(--tt-strip-n, 3), 3fr); column-gap: var(--tt-space-6);
  padding-top: var(--tt-space-5); border-top: var(--tt-rule-section-width) solid var(--tt-text); color: var(--tt-text);
}
.tt-strip__headline { margin: 0; font-family: var(--font-display); }
.tt-strip__time { margin-top: var(--tt-space-2); }
@media (max-width: 767px) {
  .tt-strip { grid-template-columns: 1fr; }
  .tt-strip__head { padding-bottom: var(--tt-space-3); }
  .tt-strip__item { padding: var(--tt-space-3) 0; border-top: var(--tt-rule-item-width) solid var(--tt-border); }
}

/* ------------------------------------------------------------ picture + drawing */
.tt-picture { margin: 0; }
.tt-picture__frame { position: relative; overflow: hidden; background: var(--tt-panel); border-radius: var(--tt-radius); }
.tt-picture__frame > img { display: block; width: 100%; height: auto; }
.tt-picture--framed .tt-picture__frame > img { height: 100%; object-fit: cover; }
.tt-picture__credit { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); box-sizing: border-box; padding: 3px 8px; background: var(--tt-paper); color: var(--tt-ink); font-family: var(--font-ui); }
.tt-picture__caption { margin-top: var(--tt-space-2); color: var(--tt-text-secondary); font-family: var(--font-text); }
.tt-illustration { display: block; width: 100%; background: var(--tt-mist); border-radius: var(--tt-radius); }
.tt-illustration > svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------------- table */
.tt-table { width: 100%; border-collapse: collapse; color: var(--tt-text); font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }
.tt-table caption { caption-side: top; text-align: start; padding-bottom: var(--tt-space-3); }
.tt-table th, .tt-table td {
  padding: var(--tt-space-3) var(--tt-space-5) var(--tt-space-3) 0; text-align: start; vertical-align: top;
  border-bottom: var(--tt-rule-item-width) solid var(--tt-border); font-size: 16px; line-height: 24px; font-weight: 400;
}
.tt-table th:last-child, .tt-table td:last-child { padding-inline-end: 0; }
.tt-table thead th { padding-top: 0; font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); border-bottom: var(--tt-rule-section-width) solid var(--tt-text); }
.tt-table .is-numeric { text-align: end; }

/* --------------------------------------------------------------- social posts */
.tt-post {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(24px * var(--k)); font-family: var(--font-display);
}
.tt-post__top { display: flex; }
.tt-post__text { margin: auto 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; color: inherit; }
.tt-post__foot { display: flex; }
.tt-post__colon { display: grid; gap: calc(16.1px * var(--k)); }
.tt-post__colon > i { display: block; width: calc(26px * var(--k)); height: calc(26px * var(--k)); background: var(--tt-ink); }
.tt-post__source { margin: 0; font-family: var(--font-text); font-size: calc(14px * var(--k)); line-height: calc(20px * var(--k)); color: var(--tt-ink); }
.tt-post__flag { display: inline-flex; align-items: center; background: var(--tt-orange); padding: calc(7.1px * var(--k)) calc(9.8px * var(--k)); }

/* ------------------------------------------------------------------ thumbnail */
.tt-thumb { position: relative; overflow: hidden; background: var(--tt-slate); }
.tt-thumb__picture { position: absolute; top: 0; right: 0; bottom: 0; left: var(--tt-thumbnail-panel); background: var(--tt-slate); }
.tt-thumb__picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-thumb__mark { position: absolute; top: calc(16px * var(--k)); right: calc(16px * var(--k)); line-height: 0; }
.tt-thumb__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--tt-thumbnail-panel); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(20px * var(--k));
  background: var(--tt-ink); color: var(--tt-paper);
}
.tt-thumb__headline { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; }

/* -------------------------------------------------------------- caption strap */
.tt-strap { display: inline-flex; align-items: stretch; height: calc(var(--tt-video-strap-box) * var(--k)); }
.tt-strap__box { flex: none; display: flex; align-items: center; justify-content: center; width: calc(var(--tt-video-strap-box) * var(--k)); background: var(--tt-ink); }
.tt-strap__bar {
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: calc(12px * var(--k)); max-width: calc(var(--tt-video-strap-bar-max) * var(--k)); padding: 0 calc(53px * var(--k));
  background: var(--tt-paper); color: var(--tt-ink);
}
.tt-strap__headline {
  margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.025em; white-space: nowrap;
  font-size: calc(var(--tt-video-strap-headline) * var(--k)); line-height: 1;
}
.tt-frame { position: relative; overflow: hidden; background: var(--tt-slate); }
.tt-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-frame__bug { position: absolute; top: calc(var(--tt-video-bug-margin) * var(--k)); right: calc(var(--tt-video-bug-margin) * var(--k)); line-height: 0; }
.tt-frame > .tt-strap { position: absolute; left: calc(var(--tt-video-strap-margin) * var(--k)); bottom: calc(var(--tt-video-strap-margin) * var(--k)); }

/* ------------------------------------------------------------ email signature */
.tt-signature { display: inline-flex; align-items: flex-start; gap: var(--tt-space-4); font-family: var(--font-ui); }
.tt-signature__tile { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--tt-ink); }
.tt-signature__name, .tt-signature__meta { margin: 0; font-size: 14px; line-height: 20px; }
.tt-signature__name { font-weight: 600; color: var(--tt-text); }
.tt-signature__meta { font-weight: 400; color: var(--tt-text-secondary); }

/* ------------------------------------------------------------ partner lockup */
.tt-partner--side { display: inline-flex; align-items: center; gap: var(--tt-partner-space); }
.tt-partner__rule { flex: none; width: var(--tt-rule-item-width); height: calc(var(--tt-partner-h) * 1.4); background: var(--tt-text); }
.tt-partner__theirs { display: flex; align-items: center; }
.tt-partner--stacked { display: inline-flex; flex-direction: column; align-items: flex-start; }
.tt-partner__caption { margin: var(--tt-space-4) 0; color: var(--tt-text-secondary); font-family: var(--font-text); font-size: 14px; line-height: 20px; }