/* Thursday Ads: the look of the spaces, set in the Customizer (Advertising). The theme draws the space; this
   gives it its style, its width, its alignment and its room. */
.tt-ad { padding: var(--tt-ad-space, 40px) 0; }
.tt-ad--kind-inline { padding: var(--tt-space-2) 0; }
.tt-ad--kind-tower { padding: 0 0 var(--tt-ad-space, 40px); }
.tt-ad--article-end { padding-top: 0; }
.tt-ad__body { display: flex; justify-content: center; width: 100%; min-width: 0; }
.tt-ad__body > * { max-width: 100%; }
.tt-ad__unit { line-height: 0; max-width: 100%; }
.tt-ad__native { line-height: normal; }
.tt-ad__sample { display: block; max-width: 100%; height: auto; }

/* alignment and width */
.tt-ad--align-start { align-items: flex-start; }
.tt-ad--align-start .tt-ad__body { justify-content: flex-start; }
.tt-ad--align-start .tt-ad__label { text-align: start; }
.tt-ad--width-wide .tt-ad__body > * { max-width: min(100%, 970px); }
.tt-ad--width-medium .tt-ad__body > * { max-width: min(100%, 728px); }
.tt-ad--width-column .tt-ad__body > * { max-width: 100%; }
.tt-ad--width-wide .tt-ad__empty { max-width: 970px; }
.tt-ad--width-medium .tt-ad__empty { max-width: 728px; }

/* the label */
.tt-ad--label-frame .tt-ad__label, .tt-ad--kind-tower .tt-ad__label { text-align: start; }
.tt-ad--label-below .tt-ad__label { margin-top: var(--tt-space-1, 4px); }

/* framed: between the paper's rules, like a news strip */
.tt-ad--style-framed { margin: var(--tt-ad-space, 40px) 0; padding: var(--tt-space-3) 0 var(--tt-space-5); border-top: var(--tt-rule-section-width, 3px) solid var(--tt-text); border-bottom: var(--tt-rule-item-width, 1px) solid var(--tt-border); }
.tt-ad--style-framed.tt-ad--label-frame .tt-ad__label { margin-top: calc(-1 * var(--tt-space-3)); padding-top: var(--tt-space-2); }
.tt-ad--style-framed.tt-ad--kind-inline { margin: var(--tt-space-2) 0; }

/* card: on the paper's grey panel */
.tt-ad--style-card { margin: var(--tt-ad-space, 40px) 0; padding: 22px; background: var(--tt-panel); box-sizing: border-box; }
.tt-ad--style-card .tt-ad__label { text-align: start; }
.tt-ad--style-card.tt-ad--kind-inline { margin: var(--tt-space-2) 0; }

/* native: a story card; the word that says it is paid for sits where the section label would */
.tt-ad__word { margin: 0 0 var(--tt-space-3); font-family: var(--font-ui); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-text-secondary); }
[lang="ur"] .tt-ad__word, .tt-ad__word:lang(ur) { font-family: var(--font-urdu); letter-spacing: 0; font-size: 13px; text-transform: none; }
.tt-ad__native .tt-story__picture { margin-bottom: var(--tt-space-3); }
.tt-ad__native .tt-ad__link { display: block; line-height: 0; }
.tt-ad__native .tt-ad__link img, .tt-ad__native .tt-ad__link svg { display: block; width: 100%; height: auto; }
.tt-ad--style-native { padding: var(--tt-ad-space, 40px) 0; }
.tt-ad--style-native .tt-ad__body > * { max-width: 100%; }
.tt-ad--style-native .tt-story--split { width: 100%; }
.tt-ad--style-native.tt-ad--kind-wide .tt-story--split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); border-top: var(--tt-rule-section-width, 3px) solid var(--tt-text); padding-top: var(--tt-space-5); }
.tt-ad--style-native.tt-ad--kind-inline { padding: var(--tt-space-4) 0; border-top: var(--tt-rule-item-width, 1px) solid var(--tt-border); border-bottom: var(--tt-rule-item-width, 1px) solid var(--tt-border); }
.tt-ad--kind-inline .tt-story--split { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--tt-space-5); align-items: start; }
@media (max-width: 600px) { .tt-ad--kind-inline .tt-story--split { grid-template-columns: 1fr; } }
.tt-article__body .tt-ad__native a.tt-story__link { text-decoration: none; }
.tt-article__body .tt-ad__native .tt-story__headline { padding-top: 0; }
.tt-article__body .tt-ad__native > * { margin: 0; }

/* the in-grid spaces: a card among the cards, an item in the list */
.tt-ad--kind-card { padding: 0; margin: 0; gap: 0; align-items: stretch; }
.tt-ad--kind-card .tt-ad__body { display: block; }
.tt-ad--kind-card .tt-ad__empty { max-width: none; aspect-ratio: 16 / 9; min-height: 0; }
.tt-ad--kind-card .tt-ad__native .tt-ad__link img, .tt-ad--kind-card .tt-ad__native .tt-ad__link svg { aspect-ratio: 16 / 9; object-fit: cover; background: var(--tt-panel); }
.tt-ad--kind-list .tt-ad__native .tt-ad__link img, .tt-ad--kind-list .tt-ad__native .tt-ad__link svg { aspect-ratio: 4 / 3; object-fit: cover; background: var(--tt-panel); }
.tt-ad--kind-list { padding-block: var(--tt-space-5); margin: 0; gap: 0; align-items: stretch; }
.tt-ad--kind-list .tt-ad__body { display: block; }
.tt-ad--kind-list .tt-ad__native { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--tt-space-5); align-items: start; }
.tt-ad--kind-list .tt-ad__native .tt-story__picture { order: 2; margin: 0; }
.tt-ad--kind-list .tt-ad__empty { max-width: none; min-height: 120px; }
@media (max-width: 600px) { .tt-ad--kind-list .tt-ad__native { grid-template-columns: 1fr; } .tt-ad--kind-list .tt-ad__native .tt-story__picture { order: 0; } }

/* the tower beside the article */
.tt-ad--kind-tower { padding-top: 0; align-items: flex-start; }
.tt-ad--kind-tower .tt-ad__body { justify-content: flex-start; }
@media (min-width: 1000px) { .tt-ad--sticky { position: sticky; top: calc(60px + var(--tt-space-5)); } }

/* phones */
@media (max-width: 699px) { .tt-ad--phone-hidden { display: none; } }