/* «Дайджест / Telegram» switch of the news section and the Telegram slider:
   template-parts/section-news.php, template-parts/telegram-feed.php.
   All cards reuse the news cards' markup and styles; drawn here are the switch,
   the channel card, the closing card and what differs for posts. */

/* ---------- Two modes in one place ---------- */

/* Each mode's links, arrows and slider share one grid cell with the other mode's,
   so the section keeps its size and switching is a cross-fade, not a jump. */
.pk-news-section[data-news-view] .news-header-swap,
.pk-news-section[data-news-view] .news__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The mode that leaves fades out quickly; the one that arrives fades in a moment
   later and rises a few pixels, so the two never show half-transparent together. */
.pk-news-section[data-news-view] .news-header-swap > *,
.pk-news-section[data-news-view] .news__main > * {
  grid-area: 1 / 1;
  transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s, visibility 0s;
}

.pk-news-section[data-news-view] .news-header-swap > .news-header-links {
  justify-content: flex-end;
}

.pk-news-section[data-news-view="site"] [data-news-mode="tg"],
.pk-news-section[data-news-view="tg"] [data-news-mode="site"] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0s linear 0.15s, visibility 0s linear 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .pk-news-section[data-news-view] .news-header-swap > *,
  .pk-news-section[data-news-view] .news__main > *,
  .pk-news-section[data-news-view="site"] [data-news-mode="tg"],
  .pk-news-section[data-news-view="tg"] [data-news-mode="site"] {
    transform: none;
    transition: none;
  }
}

/* ---------- Switch ---------- */

/* Two icon buttons (newspaper / Telegram plane) right of the heading, in one thin frame
   with no inner padding, so the control stays lower than the heading beside it. The
   labels are kept for screen readers and show as a tooltip on hover. Square, like every
   control on the site. */
.news-title-row {
  display: flex;
  align-items: center;
  gap: 12px 20px;
}

.news-mode {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid rgba(22, 41, 91, 0.18);
}

.news-mode__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-grey-300);
  cursor: pointer;
  transition: color 0.2s;
}

.news-mode__icon {
  display: block;
  width: 18px;
  height: 18px;
}

.news-mode__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.news-mode__btn.is-active {
  color: var(--color-white);
  background: var(--color-blue-200);
}

/* With JS the dark block is one element that slides from one button to the other. */
.news-mode__indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--color-blue-200);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.news-mode.has-indicator .news-mode__indicator {
  opacity: 1;
}

.news-mode.has-indicator .news-mode__btn.is-active {
  background: none;
}

@media (hover: hover) {
  .news-mode__btn:not(.is-active):hover {
    color: var(--color-blue-200);
  }
}

.news-mode__btn:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .news-mode__indicator {
    transition: none;
  }
}

/* Below 1024px the section is dark blue (section-news.css): the frame and icons
   turn light, the active one is dark on a white block. */
@media (max-width: 1024px) {
  .pk-news-section .news-mode {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .pk-news-section .news-mode__btn {
    color: rgba(255, 255, 255, 0.7);
  }

  .pk-news-section .news-mode__btn.is-active {
    color: var(--color-blue-200);
    background: var(--color-white);
  }

  .pk-news-section .news-mode__indicator {
    background: var(--color-white);
  }

  .pk-news-section .news-mode.has-indicator .news-mode__btn.is-active {
    background: none;
  }
}

@media (max-width: 1024px) and (hover: hover) {
  .pk-news-section .news-mode__btn:not(.is-active):hover {
    color: var(--color-white);
  }
}

/* Phones: the heading on the left, the switch pinned to the right edge of the row. */
@media (max-width: 600px) {
  .pk-news-section .news-header-row .section-header {
    width: 100%;
    max-width: none;
  }

  .news-title-row {
    justify-content: space-between;
  }

  .news-title-row h2 {
    white-space: nowrap;
  }

  .news-mode__btn {
    height: 30px;
  }
}

@media (max-width: 768px) {
  .pk-news-section[data-news-view] .news-header-swap > .news-header-links {
    justify-content: flex-start;
  }
}

/* ---------- Channel card (first slide) ---------- */

/* One solid card as tall as the news cards beside it: a hook up top, the channel
   and the join button at the bottom, a large faint plane as the only decoration.
   Its sizes follow the card's width (cqi, the slide is the container), like the
   news cards' type, so it scales from phones to wide screens without jumps.
   Its bottom meets the end of the neighbours' text, not their empty space under it:
   a news card ends with the content's bottom padding plus the description's margin. */
.tg-promo {
  --tg-card-tail: calc(clamp(14px, 6cqi, 20px) + 10px);
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--tg-card-tail));
  min-height: 300px;
  padding: clamp(14px, 8cqi, 28px) clamp(14px, 7.5cqi, 24px) clamp(14px, 7.5cqi, 24px);
  overflow: hidden;
  background: var(--color-blue-200);
  color: var(--color-white);
  text-decoration: none;
}

/* The card is a link: the theme's a:hover colour would turn its text blue on blue. */
.tg-promo:hover,
.tg-promo:focus {
  color: var(--color-white);
}

.tg-promo__mark {
  position: absolute;
  right: -16%;
  bottom: 14%;
  color: var(--color-white);
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}

.tg-promo__mark svg {
  display: block;
  width: clamp(140px, 80cqi, 260px);
  height: clamp(140px, 80cqi, 260px);
}

.tg-promo__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 3.8cqi, 12px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-100);
}

.tg-promo__label svg {
  width: 1.3em;
  height: 1.3em;
}

.tg-promo__title {
  position: relative;
  margin-top: clamp(10px, 6cqi, 20px);
  font-size: clamp(17px, 8.2cqi, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.tg-promo__text {
  position: relative;
  margin-top: clamp(8px, 4cqi, 14px);
  font-size: clamp(12.5px, 4.6cqi, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.tg-promo__channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 3.6cqi, 12px);
  margin-top: auto;
  padding-top: clamp(12px, 6cqi, 24px);
}

.tg-promo__avatar {
  flex: 0 0 auto;
  width: clamp(28px, 13cqi, 44px);
  height: clamp(28px, 13cqi, 44px);
  object-fit: cover;
}

.tg-promo__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tg-promo__name {
  font-size: clamp(11.5px, 4.3cqi, 14px);
  font-weight: 600;
  line-height: 1.3;
}

.tg-promo__meta {
  font-size: clamp(11px, 4cqi, 13px);
  color: var(--color-grey-100);
}

.tg-promo__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(10px, 5cqi, 16px);
  padding: clamp(9px, 4.5cqi, 14px) clamp(12px, 5.5cqi, 18px);
  background: var(--color-white);
  color: var(--color-blue-200);
  font-size: clamp(11px, 4.3cqi, 14px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.tg-promo__btn span {
  font-size: 1.3em;
  transition: transform 0.2s;
}

@media (hover: hover) {
  .tg-promo:hover .tg-promo__btn {
    background: var(--color-highlight);
  }

  .tg-promo:hover .tg-promo__btn span {
    transform: translateX(4px);
  }
}

/* News content has a larger bottom padding on tablets and phones (section-news.css). */
@media (max-width: 768px) {
  .tg-promo {
    --tg-card-tail: calc(clamp(14px, 6cqi, 20px) + 16px);
  }
}

/* The narrowest cards drop the pitch line and keep the hook, channel and button. */
@container (max-width: 230px) {
  .tg-promo__text {
    display: none;
  }
}

/* ---------- Post cards ---------- */

/* Posts are posters as often as photos: show the whole picture, never crop it. */
.tg-slider .news-slider__img {
  object-fit: contain;
  background: var(--color-grey-010);
}

.tg-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.tg-card__badge svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
}

.tg-card__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(22, 41, 91, 0.2);
}

.tg-card--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E") 50% 50% / 26px no-repeat,
    rgba(22, 41, 91, 0.75);
}

.tg-card__no-image {
  background: var(--color-blue-200);
}

.tg-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.25);
}

.tg-card__placeholder svg {
  width: 30%;
  height: 30%;
}

/* ---------- Closing card ---------- */

.tg-more-card {
  /* Ends where the neighbours' text ends, not at the bottom of their empty space —
     the same measure as the channel card (.tg-promo above). */
  --tg-card-tail: calc(clamp(14px, 6cqi, 20px) + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: calc(100% - var(--tg-card-tail));
  min-height: 0;
  padding: 20px;
  border: 1px solid var(--color-grey-200);
  color: var(--color-blue-200);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.tg-more-card svg {
  width: 36px;
  height: 36px;
}

@media (hover: hover) {
  .tg-more-card:hover {
    background: var(--color-blue-200);
    color: var(--color-white);
  }
}

/* Below 1024px the section is dark blue (section-news.css): a frame-only card with blue
   text vanished there, so it becomes a white card, like the digest's closing card. */
@media (max-width: 1024px) {
  .pk-news-section .tg-more-card {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-blue-200);
  }
}

@media (max-width: 1024px) and (hover: hover) {
  .pk-news-section .tg-more-card:hover {
    background: var(--color-grey-010);
    color: var(--color-blue-200);
  }
}

.tg-promo:focus-visible,
.tg-more-card:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

/* Press feedback for the switch. */
.news-mode__btn:active {
  opacity: 0.7;
}