/*
 * TechWire UX Builder elements ([tw_*] shortcodes).
 *
 * Sizes, colours and spacing are measured from the TechWire reference page
 * (1200px content width). Breakpoints follow the reference (1024 tablet,
 * 767 mobile) rather than Flatsome's, so the blocks reflow like the original.
 */

.twx {
  --twx-ink: #26222f;
  --twx-fg: #4c455f;
  --twx-accent: #805aed;
  --twx-accent-hover: #6a45d8;
  --twx-line: #dfdee3;
  --twx-on-dark: #dfdee3;
  --twx-on-dark-text: #f7f7f8;
  --twx-display: Sora, Inter, system-ui, sans-serif;
  --twx-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  font-family: var(--twx-body);
  font-size: 16px;
  line-height: 26.4px;
  color: var(--twx-fg);
}

.twx *,
.twx *::before,
.twx *::after { box-sizing: border-box; }

.twx h2, .twx h3, .twx h4, .twx h5, .twx h6, .twx p, .twx ul, .twx li { margin: 0; padding: 0; }
.twx h2, .twx h3, .twx h4, .twx h5, .twx h6 { text-transform: none; }
.twx ul { list-style: none; }
.twx ul > li { margin-left: 0 !important; }

/* Pages built from these blocks sit tight under the header like the
   reference, and a closing newsletter band meets the footer directly. */
#content.page-wrapper:has(.twx) { padding-top: 20px; }
#content.page-wrapper:has(.twx-band:last-child),
#content .row-main > .col:has(.twx-band:last-child) { padding-bottom: 0; }
.twx a { text-decoration: none; }
.twx .twx-icon { flex-shrink: 0; }

/* ── Heading row ───────────────────────────────────────────────────── */

.twx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.twx .twx-head__title {
  font-family: var(--twx-display);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--twx-ink);
}

.twx-head--lg .twx-head__title { font-size: 32px; line-height: 41.6px; }
.twx-head--md .twx-head__title { font-size: 24px; line-height: 28.8px; }
.twx-head--sm .twx-head__title { font-size: 20px; line-height: 24px; }

.twx .twx-head__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  color: var(--twx-accent);
}

.twx .twx-head__more:hover { color: var(--twx-accent-hover); }

/* ── Card parts ────────────────────────────────────────────────────── */

.twx-card { position: relative; min-width: 0; }

.twx-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #e4e2e9;
}

.twx-media .tw-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.twx-media .tw-card__img--empty { background: linear-gradient(135deg, #b8f5dc, #e3dafd); }

.twx .twx-title {
  font-family: var(--twx-display);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--twx-ink);
}

.twx .twx-title a { color: inherit; }
.twx .twx-title a:hover { color: var(--twx-accent); }

.twx .twx-label {
  display: table;
  font-size: 12px;
  line-height: 26.4px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--twx-accent);
}

.twx .twx-label--light { color: var(--twx-on-dark); }

.twx .twx-label--tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 2px;
  color: var(--twx-ink);
  background: #fff;
  border-radius: 2px;
}

.twx-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 15.6px;
  color: var(--twx-fg);
}

.twx-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 14px;
  line-height: 19.2px;
}

.twx-meta > span:last-child { margin-right: 0; }

.twx .twx-excerpt { font-size: 16px; line-height: 26.4px; color: var(--twx-fg); }

/* Overlay cards: flat tint over the image, text pinned to the bottom. */
.twx-card--overlay .twx-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(10 9 12 / 0.47);
  pointer-events: none;
}

.twx-card--overlay .twx-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 24px 8px;
  pointer-events: none;
}

.twx-card--overlay .twx-card__body a { pointer-events: auto; }
.twx-card--overlay .twx-title { color: #fff; }
.twx-card--overlay .twx-title a:hover { color: #fff; opacity: 0.85; }
.twx-card--overlay .twx-excerpt { color: var(--twx-on-dark-text); }
.twx-card--overlay .twx-meta { color: var(--twx-on-dark); }

/* ── Grids ─────────────────────────────────────────────────────────── */

.twx-grid { display: grid; gap: 32px 20px; }
.twx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.twx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.twx-grid--flush { gap: 0; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.twx-hero {
  display: grid;
  grid-template-columns: minmax(0, 890fr) minmax(0, 280fr);
  column-gap: 30px;
  align-items: start;
}

.twx-card--lead .twx-media { aspect-ratio: 890 / 569; }
.twx-card--lead .twx-card__body { padding: 0 240px 25px 50px; }
.twx-card--lead .twx-label { font-size: 13px; margin-bottom: 20px; }
.twx-card--overlay.twx-card--lead .twx-title { font-size: 32px; line-height: 41.6px; margin-bottom: 5px; }
.twx-card--lead .twx-meta { margin-bottom: 16px; }

.twx-hero__thumb { aspect-ratio: 280 / 182; margin-bottom: 20px; }
.twx-hero__list li { margin-bottom: 20px; }
.twx-hero__list li:last-child { margin-bottom: 0; }
.twx-hero__list .twx-label { margin-bottom: 2px; }
.twx-hero__list .twx-title { font-size: 16px; line-height: 20px; }

/* ── Editor's Pick (tag on image) ──────────────────────────────────── */

.twx-card__top { position: relative; }
.twx-card--tagged .twx-media { aspect-ratio: 270 / 175; }
.twx-card--tagged .twx-card__body { padding: 16px 24px 0 0; }
.twx-card--tagged .twx-title { font-size: 20px; line-height: 24px; }

/* ── Row list (Tech Reviews) ───────────────────────────────────────── */

.twx-rows { display: grid; row-gap: 24px; }

.twx-card--row {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  column-gap: 24px;
}

/* Ratio sets the minimum height; a taller text column stretches the image. */
.twx-card--row .twx-media::before { content: ""; display: block; padding-top: 64.08%; }
.twx-card--row .twx-card__body { padding-top: 10px; }
.twx-card--row .twx-label { margin-bottom: 16px; }
.twx-card--row .twx-title { font-size: 24px; line-height: 28.8px; margin-bottom: 10px; }

/* ── Overlay grid (Must Read, Games) ───────────────────────────────── */

.twx-grid--flush .twx-card--overlay .twx-media { aspect-ratio: 600 / 419; }
.twx-grid--nolabel .twx-card--overlay .twx-media { aspect-ratio: 600 / 406; }
.twx-card--overlay .twx-label { margin-bottom: 16px; }
.twx-card--overlay .twx-title { font-size: 24px; line-height: 28.8px; margin-bottom: 8px; }

/* ── Card grid (Technology, Apps) ──────────────────────────────────── */

.twx-card--grid .twx-media { aspect-ratio: 385 / 250; }
.twx-card--grid .twx-card__body { padding: 16px 24px 16px 0; }
.twx-card--grid .twx-title { font-size: 20px; line-height: 24px; margin-bottom: 8px; }
.twx-card--grid .twx-meta { margin-bottom: 12px; }

/* ── Feature block (Gadgets, Software) ─────────────────────────────── */

.twx-card--feature .twx-media { aspect-ratio: 584 / 380; }
.twx-card--feature .twx-card__body { padding-top: 24px; }
.twx-card--feature .twx-title,
.twx-card--mini .twx-title { font-size: 20px; line-height: 24px; margin-bottom: 8px; }
.twx-card--feature .twx-meta,
.twx-card--mini .twx-meta { margin-bottom: 8px; }
.twx-feature__minis { margin-top: 40px; }
.twx-card--mini .twx-media { aspect-ratio: 292 / 190; }
.twx-card--mini .twx-card__body { padding: 16px 24px 0 0; }

/* ── Newsletter card ───────────────────────────────────────────────── */

/* Fill the column so the border lines up with the neighbouring block. */
.col-inner:has(> .twx-newsbox:only-child) { height: 100%; }

.twx-newsbox {
  height: 100%;
  padding: 0 20px 20px;
  border: 1px solid var(--twx-line);
}

.twx-newsbox__badge {
  display: inline-flex;
  padding: 10px;
  color: #fff;
  background: var(--twx-accent);
}

.twx .twx-newsbox__title {
  margin: 23px 0 4px;
  font-family: var(--twx-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--twx-ink);
}

.twx-newsbox__text { margin-bottom: 14px !important; }

/* ── Signup form (shared by card and band) ─────────────────────────── */

.twx-form { display: flex; margin: 0; }
.twx-form--stacked { flex-direction: column; align-items: flex-start; gap: 40px; }
.twx-form--inline { gap: 16px; align-items: flex-start; }

.twx-form input[type="email"] {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 10px 12px;
  font-family: var(--twx-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--twx-ink);
  background: rgb(38 34 47 / 0.02);
  border: 1px solid rgb(38 34 47 / 0.25);
  border-radius: 6px;
  box-shadow: none;
}

.twx-form input[type="email"]::placeholder { color: #808285; opacity: 1; }
.twx-form input[type="email"]:focus { border-color: var(--twx-accent); outline: none; box-shadow: none; }

.twx-form button {
  flex-shrink: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--twx-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  background: var(--twx-accent);
  border: 1px solid var(--twx-accent);
  border-radius: 6px;
  cursor: pointer;
}

.twx-form button:hover { background: var(--twx-accent-hover); border-color: var(--twx-accent-hover); }
.twx-form--inline input[type="email"] { flex: 1; margin-top: 6px; }
.twx-form--inline button { width: 181px; height: 42px; margin-top: 8px; padding: 0 14px; }

/* ── Image banner ──────────────────────────────────────────────────── */

.twx-banner { margin: 0 auto; }
.twx-banner a { display: block; }
.twx-banner img { display: block; width: 100%; height: auto; }

/* ── Stay Connected ────────────────────────────────────────────────── */

.twx .twx-social__title {
  margin-bottom: 20px;
  font-family: var(--twx-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--twx-ink);
}

.twx-social__item { display: flex; gap: 8px; margin-bottom: 19px !important; }
.twx-social__item:last-child { margin-bottom: 0 !important; }
.twx-social__item .twx-icon { margin-top: 1px; }
.twx-social__item--facebook .twx-icon { color: #3e83ec; }
.twx-social__item--twitter .twx-icon { color: #56cce6; }
.twx-social__item--youtube .twx-icon { color: #e62117; }
.twx-social__item--instagram .twx-icon { color: #e1306c; }

.twx .twx-social__name,
.twx .twx-social__name a {
  display: block;
  font-family: var(--twx-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--twx-ink);
}

.twx .twx-social__text { font-size: 13px; line-height: 26.4px; }

/* ── Podcast CTA ───────────────────────────────────────────────────── */

.twx-cta {
  display: grid;
  grid-template-columns: minmax(0, 300fr) minmax(0, 600fr) minmax(0, 300fr);
  min-height: 204px;
  background: var(--twx-cta-bg, #8efbda);
  border-radius: 16px;
}

.twx-cta__figure { position: relative; }
.twx-cta__figure img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; max-width: 300px; height: auto; }
.twx-cta__body { padding-top: 35px; }

.twx .twx-cta__eyebrow {
  margin-bottom: 24px;
  font-family: var(--twx-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--twx-accent);
}

.twx .twx-cta__title {
  margin-bottom: 8px;
  font-family: var(--twx-display);
  font-size: 32px;
  line-height: 41.6px;
  font-weight: 700;
  color: var(--twx-ink);
}

.twx .twx-cta__text { font-size: 14px; line-height: 26.4px; }
.twx-cta__action { display: flex; align-items: center; justify-content: flex-end; padding-right: 32px; }

.twx .twx-button {
  display: inline-block;
  padding: 15px 30px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--twx-accent);
  border-radius: 25px;
}

.twx .twx-button:hover { color: #fff; background: var(--twx-accent-hover); }

/* ── Newsletter band (full bleed) ──────────────────────────────────── */

.twx-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 72px 40px 40px;
  background:
    linear-gradient(rgb(142 251 218 / 0.64), rgb(142 251 218 / 0.64)),
    var(--twx-band-img) 0 0 / contain no-repeat;
}

.twx-band__inner {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.twx-band__copy,
.twx-band .twx-form { flex: 0 1 575px; }

.twx .twx-band__title {
  font-family: var(--twx-display);
  font-size: 40px;
  line-height: 52px;
  font-weight: 700;
  color: var(--twx-ink);
}

/* ── Tablet (reference breakpoint 1024) ────────────────────────────── */

@media (max-width: 1024px) {
  .twx-head--lg .twx-head__title { font-size: 28px; line-height: 36.4px; }
  .twx-head--md .twx-head__title { font-size: 22px; line-height: 26.4px; }
  .twx-head--sm .twx-head__title { font-size: 18px; line-height: 21.6px; }

  .twx-hero { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .twx-card--lead .twx-media { aspect-ratio: 704 / 381; }
  .twx-card--lead .twx-card__body { padding: 0 48px 24px 24px; }
  .twx-card--overlay.twx-card--lead .twx-title { font-size: 28px; line-height: 36.4px; }

  .twx-hero__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .twx-hero__thumb { margin: 0; }
  .twx-hero__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .twx-hero__list li { margin: 0; }
  .twx-hero__list .twx-title { font-size: 15px; line-height: 18.75px; }

  .twx-card--tagged .twx-title,
  .twx-card--grid .twx-title,
  .twx-card--feature .twx-title,
  .twx-card--mini .twx-title { font-size: 18px; line-height: 21.6px; }

  .twx-card--row .twx-title,
  .twx-card--overlay .twx-title { font-size: 22px; line-height: 26.4px; }

  .twx-grid--flush .twx-card--overlay .twx-media { aspect-ratio: 352 / 484; }
  .twx-grid--3,
  .twx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twx-grid--tagged { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .twx-cta { grid-template-columns: minmax(0, 272fr) minmax(0, 432fr); }
  .twx-cta__body { padding: 35px 24px 0 0; }
  .twx .twx-cta__title { font-size: 28px; line-height: 36.4px; }
  .twx-cta__action { grid-column: 2; justify-content: flex-start; padding: 16px 0 32px; }

  .twx-band { padding: 56px 32px 40px; }
  .twx-band__inner { flex-direction: column; gap: 24px; }
  .twx-band__copy,
  .twx-band .twx-form { flex-basis: auto; }
  .twx .twx-band__title { font-size: 32px; line-height: 41.6px; }
}

/* ── Mobile (reference breakpoint 767) ─────────────────────────────
   Phones get a denser magazine rhythm than the reference: one lead image
   per block, the rest as compact thumbnail rows, and Editor's Pick as a
   swipeable strip, so the page is not a wall of full-width photos. */

@media (max-width: 767px) {
  /* Side-by-side columns stack on phones; keep blocks apart. */
  .row-collapse > .col:has(.twx) + .col { margin-top: 48px; }

  .twx-head--lg .twx-head__title { font-size: 24px; line-height: 31.2px; }
  .twx-head--md .twx-head__title { font-size: 20px; line-height: 24px; }
  .twx-head--sm .twx-head__title { font-size: 20px; line-height: 24px; }
  .twx .twx-head__more { font-size: 14px; }

  /* Hero: lead card, then a divided text list (no duplicate thumbnail). */
  .twx-card--lead .twx-media { aspect-ratio: 4 / 4.2; }
  .twx-card--lead .twx-card__body { padding: 0 20px 18px; }
  .twx-card--overlay.twx-card--lead .twx-title { font-size: 23px; line-height: 29px; }
  .twx-card--lead .twx-label { margin-bottom: 8px; }
  .twx-card--lead .twx-meta { margin-bottom: 0; }
  .twx-card--lead .twx-meta > span:nth-child(3),
  .twx-card--lead .twx-excerpt { display: none; }
  .twx-hero { row-gap: 8px; }
  .twx-hero__side,
  .twx-hero__list { display: block; }
  .twx-hero__thumb { display: none; }
  .twx-hero__list li { padding: 14px 0 !important; border-bottom: 1px solid var(--twx-line); }
  .twx-hero__list li:last-child { border-bottom: 0; }
  .twx-hero__list .twx-label { line-height: 18px; margin-bottom: 4px; }
  .twx-hero__list .twx-title { font-size: 16px; line-height: 21px; }

  .twx-grid--2,
  .twx-grid--3,
  .twx-grid--4 { grid-template-columns: minmax(0, 1fr); }

  /* Editor's Pick: horizontal swipe strip. */
  .twx-grid--tagged {
    display: flex;
    gap: 14px;
    margin-right: -15px;
    padding-right: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .twx-grid--tagged::-webkit-scrollbar { display: none; }
  .twx-grid--tagged .twx-card--tagged { flex: 0 0 74%; scroll-snap-align: start; }
  .twx-card--tagged .twx-label--tag { top: 12px; left: 12px; }
  .twx-card--tagged .twx-card__body { padding: 12px 0 0; }
  .twx-card--tagged .twx-title { font-size: 17px; line-height: 21.5px; }

  /* Compact thumbnail rows: row list, secondary grid cards, feature minis. */
  .twx-card--row,
  .twx-grid .twx-card--grid:not(:first-child),
  .twx-card--mini {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
  }

  .twx-rows { row-gap: 0; }
  .twx-card--row { padding: 16px 0; border-top: 1px solid var(--twx-line); }
  .twx-card--row:first-child { padding-top: 0; border-top: 0; }
  .twx-card--row .twx-media::before { padding-top: 75%; }
  .twx-card--row .twx-card__body { padding: 0; }
  .twx-card--row .twx-label { line-height: 16px; margin-bottom: 4px; font-size: 11px; letter-spacing: 2px; }
  .twx-card--row .twx-title { margin-bottom: 6px; }

  .twx-grid:has(> .twx-card--grid) { row-gap: 0; }
  .twx-card--grid:first-child { padding-bottom: 16px; }
  .twx-card--grid:first-child .twx-card__body { padding: 14px 0 0; }
  .twx-grid .twx-card--grid:not(:first-child) { padding: 16px 0; border-top: 1px solid var(--twx-line); }
  .twx-grid .twx-card--grid:not(:first-child) .twx-media { aspect-ratio: 4 / 3; }
  .twx-grid .twx-card--grid:not(:first-child) .twx-card__body { padding: 0; }

  .twx-feature__minis { margin-top: 16px; }
  .twx-card--mini { padding: 16px 0; border-top: 1px solid var(--twx-line); }
  .twx-card--mini .twx-media { aspect-ratio: 4 / 3; }
  .twx-card--mini .twx-card__body { padding: 0; }
  .twx-card--feature .twx-card__body { padding-top: 14px; }

  .twx-card--row .twx-title,
  .twx-grid .twx-card--grid:not(:first-child) .twx-title,
  .twx-card--mini .twx-title { font-size: 16px; line-height: 20.5px; margin-bottom: 6px; }

  .twx-card--grid:first-child .twx-title,
  .twx-card--feature .twx-title { font-size: 19px; line-height: 24px; }

  .twx-card--row .twx-excerpt,
  .twx-grid .twx-card--grid:not(:first-child) .twx-excerpt,
  .twx-card--mini .twx-excerpt { display: none; }
  .twx-card--row .twx-meta,
  .twx-card--grid .twx-meta,
  .twx-card--mini .twx-meta { font-size: 11.5px; margin-bottom: 0; }
  .twx-card--grid:first-child .twx-meta,
  .twx-card--feature .twx-meta { margin-bottom: 8px; }
  .twx .twx-card--grid:first-child .twx-excerpt,
  .twx .twx-card--feature .twx-excerpt { font-size: 15px; line-height: 24px; }

  /* Overlay cards: label + title only, stacked with a hairline gap. */
  .twx-grid--flush .twx-card--overlay .twx-media,
  .twx-grid--nolabel .twx-card--overlay .twx-media { aspect-ratio: 16 / 11; }
  .twx-grid--flush:has(> .twx-card--overlay) { row-gap: 2px; }
  .twx-card--overlay .twx-card__body { padding: 0 20px 16px; }
  .twx-card--overlay .twx-label { margin-bottom: 6px; line-height: 18px; }
  .twx-card--overlay .twx-title { font-size: 20px; line-height: 25px; margin-bottom: 0; }
  .twx-grid--flush .twx-card--overlay .twx-excerpt { display: none; }

  .twx-cta { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .twx-cta__figure img { position: static; max-width: 240px; margin: -32px 0 0; }
  .twx-cta__body { padding: 20px 24px 0; }
  .twx .twx-cta__eyebrow { margin-bottom: 10px; }
  .twx .twx-cta__title { font-size: 24px; line-height: 31.2px; }
  .twx-cta__action { grid-column: 1; padding: 16px 24px 28px; }

  .twx-banner { max-width: 100% !important; }
  .twx-banner--portrait { max-width: 300px !important; }

  .twx-band { padding: 40px 16px; text-align: center; }
  .twx .twx-band__title { font-size: 28px; line-height: 36.4px; }
  .twx-form--inline { flex-direction: column; align-items: stretch; }
  .twx-form--inline button { width: 100%; }
}