/* =========================
   Media Page (unique/media.css)
   Scope: #media
   ========================= */

:root {
  --media-bg: #ffffff;
  --media-text: #231815;
  --media-muted: #666;
  --media-border: #e6e6e6;
  --media-accent: #231815;
  --media-btn-bg: #f6f6f6;

  /* icon sizes */
  --card-icon-size: 28px;
  --btn-icon-size: 16px;

  /* icon: hover (same color, just slightly darker) */
  --icon-hover-opacity: 0.85;

  /* category colors */
  --c-tv: #d94b4b;
  --c-radio: #e67e22;
  --c-newspaper: #231815;
  --c-magazine: #8e44ad;
  --c-web: #2980b9;
}

/* mobile: smaller icons */
@media screen and (max-width: 520px) {
  :root {
    --card-icon-size: 22px;
    --btn-icon-size: 14px;
  }
}

/* ---------- Main Visual ---------- */
#media .u-mainv {
  width: 100%;
  background: var(--media-accent);
  display: flex;
  align-items: center;
}

#media .u-mainv .mainv-wrap {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 80px 10px 20px;
}

@media print, screen and (min-width: 915px) {
  #media .u-mainv .mainv-wrap { padding: 80px 30px 20px; }
}

#media .u-mainv img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Layout ---------- */
#media .u-media {
  background: var(--media-bg);
  color: var(--media-text);
  padding: 28px 10px 56px;
}

@media print, screen and (min-width: 915px) {
  #media .u-media { padding: 40px 30px 80px; }
}

#media .media-wrap {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

/* ---------- Filter Buttons ---------- */
#media .media-filter {
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--media-border);
  margin-bottom: 18px;
}

#media .media-filter__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#media .media-filter__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 14px 0 38px; /* icon space */
  margin: 0 8px 12px 0;

  border: 1px solid var(--media-border);
  border-radius: 999px;
  background: var(--media-btn-bg);
  color: var(--media-text);

  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;

  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

/* filter button icon (CSS only) */
#media .media-filter__btn::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);

  background-color: transparent; /* insurance */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* hover: border only (icon color should NOT be overwritten) */
#media .media-filter__btn:hover {
  border-color: #cfcfcf;
}
#media .media-filter__btn:hover::before {
  opacity: var(--icon-hover-opacity);
}

/* active: button */
#media #filter-all:checked + label,
#media #filter-tv:checked + label,
#media #filter-radio:checked + label,
#media #filter-newspaper:checked + label,
#media #filter-magazine:checked + label,
#media #filter-web:checked + label {
  background: var(--media-accent);
  color: #fff;
  border-color: var(--media-accent);
}

/* active: icon becomes white (SVG is black -> invert) */
#media #filter-all:checked + label::before,
#media #filter-tv:checked + label::before,
#media #filter-radio:checked + label::before,
#media #filter-newspaper:checked + label::before,
#media #filter-magazine:checked + label::before,
#media #filter-web:checked + label::before {
  filter: invert(1) brightness(2);
  opacity: 1;
}

/* ---------- List Grid ---------- */
#media .media-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}



/* ---------- Card ---------- */
#media .media-card {
  position: relative;
  border: 1px solid var(--media-border);
  border-radius: 18px;
  background: #fff;
  padding: 14px 16px 14px 72px; /* icon space */
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* card icon */
#media .media-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--card-icon-size);
  height: var(--card-icon-size);

  background-color: transparent; /* insurance */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* hover: icon only gets slightly darker (keep category color) */
#media .media-card:hover {
  border-color: #d8d8d8;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
#media .media-card:hover::before {
  opacity: var(--icon-hover-opacity);
}

/* inner layout */
#media .media-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#media .media-card__titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#media .media-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f2f2;
  border: 1px solid var(--media-border);
  font-size: 12px;
  color: var(--media-text);
  white-space: nowrap;
}

#media .media-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .02em;

  /* clamp ?? */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

  overflow: hidden;

  /* ??????????/???????? */
  white-space: normal !important;

  /* URL??????????????OK? */
  word-break: break-word;
  overflow-wrap: anywhere;

  color: var(--media-text);
}

#media .media-link {
  font-size: 12px;          /* ??? */
  color: var(--media-muted);
  text-decoration: none;    /* ???? */
  white-space: nowrap;
  word-break: break-all;    /* URL??? */
}

#media .media-link:hover {
  opacity: 0.8;
}


#media .media-card__bottom {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#media .media-date {
  font-size: 12px;
  color: var(--media-muted);
  white-space: nowrap;
  margin-right: auto;
}

/* mobile: link drops under title */
@media screen and (max-width: 520px) {
  #media .media-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #media .media-link { margin-top: 0; }
}

/* =========================================================
   ICONS
   - use URL-encoded SVG (robust)
   - colorization is done by filter (per-category)
   ========================================================= */

/* --- SVG background-image assignments --- */

/* ALL grid (button only) */
#media .media-filter__btn.btn-all::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27/%3E%3C/svg%3E");
}

/* TV */
#media .media-filter__btn.btn-tv::before,
#media .media-card.cat-tv::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2721%27%20x2%3D%2716%27%20y2%3D%2721%27/%3E%3Cline%20x1%3D%2712%27%20y1%3D%2717%27%20x2%3D%2712%27%20y2%3D%2721%27/%3E%3C/svg%3E");
}

/* RADIO */
#media .media-filter__btn.btn-radio::before,
#media .media-card.cat-radio::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%279%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%275%27%20x2%3D%2716%27%20y2%3D%279%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2714%27%20r%3D%271.5%27/%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2714%27%20r%3D%271.5%27/%3E%3C/svg%3E");
}

/* NEWSPAPER */
#media .media-filter__btn.btn-newspaper::before,
#media .media-card.cat-newspaper::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h14a2%202%200%200%201%202%202v14H6a2%202%200%200%201-2-2V4z%27/%3E%3Cpath%20d%3D%27M4%204v14%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%278%27%20x2%3D%2718%27%20y2%3D%278%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2712%27%20x2%3D%2718%27%20y2%3D%2712%27/%3E%3C/svg%3E");
}

/* MAGAZINE (OPEN BOOK) */
#media .media-filter__btn.btn-magazine::before,
#media .media-card.cat-magazine::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%206a3%203%200%200%201%203-3h6a3%203%200%200%201%203%203v12a3%203%200%200%200-3-3H5a3%203%200%200%200-3%203z%27/%3E%3Cpath%20d%3D%27M22%206a3%203%200%200%200-3-3h-6a3%203%200%200%200-3%203v12a3%203%200%200%201%203-3h6a3%203%200%200%201%203%203z%27/%3E%3C/svg%3E");
}

/* WEB */
#media .media-filter__btn.btn-web::before,
#media .media-card.cat-web::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27/%3E%3Cline%20x1%3D%273%27%20y1%3D%2712%27%20x2%3D%2721%27%20y2%3D%2712%27/%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018%27/%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%200%200%2018%27/%3E%3C/svg%3E");
}

/* --- Category colorization (filters) ---
   ????SVG???????????????????
   ??????????????????????????????????????
*/

/* TV (??) */
#media .media-card.cat-tv::before,
#media .media-filter__btn.btn-tv::before {
  filter: brightness(0) saturate(100%) invert(35%) sepia(67%) saturate(1673%) hue-rotate(332deg) brightness(96%) contrast(95%);
}

/* RADIO (?????) */
#media .media-card.cat-radio::before,
#media .media-filter__btn.btn-radio::before {
  filter: brightness(0) saturate(100%) invert(54%) sepia(74%) saturate(519%) hue-rotate(351deg) brightness(100%) contrast(94%);
}

/* NEWSPAPER (????) */
#media .media-card.cat-newspaper::before,
#media .media-filter__btn.btn-newspaper::before {
  filter: none;
}

/* MAGAZINE (??) */
#media .media-card.cat-magazine::before,
#media .media-filter__btn.btn-magazine::before {
  filter: brightness(0) saturate(100%) invert(28%) sepia(24%) saturate(1349%) hue-rotate(252deg) brightness(92%) contrast(96%);
}

/* WEB (??) */
#media .media-card.cat-web::before,
#media .media-filter__btn.btn-web::before {
  filter: brightness(0) saturate(100%) invert(31%) sepia(77%) saturate(1528%) hue-rotate(186deg) brightness(95%) contrast(96%);
}

/* ALL button icon (????) */
#media .media-filter__btn.btn-all::before { filter: none; }

/* ---------- Filtering (CSS only) ---------- */
#media .media-card { display: block; }

#media #filter-tv:checked ~ .media-list .media-card { display: none; }
#media #filter-tv:checked ~ .media-list .media-card.cat-tv { display: block; }

#media #filter-radio:checked ~ .media-list .media-card { display: none; }
#media #filter-radio:checked ~ .media-list .media-card.cat-radio { display: block; }

#media #filter-newspaper:checked ~ .media-list .media-card { display: none; }
#media #filter-newspaper:checked ~ .media-list .media-card.cat-newspaper { display: block; }

#media #filter-magazine:checked ~ .media-list .media-card { display: none; }
#media #filter-magazine:checked ~ .media-list .media-card.cat-magazine { display: block; }

#media #filter-web:checked ~ .media-list .media-card { display: none; }
#media #filter-web:checked ~ .media-list .media-card.cat-web { display: block; }

/* ---------- Footer copy color adjustment (if needed) ---------- */
#media #l-footer .footer-copy { color: var(--media-text); }


#media .media-grid {
  grid-template-columns: 1fr;
}

/* ===== Card layout like screenshot ===== */

#media .media-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media screen and (min-width: 915px){
  #media .media-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* card shell */
#media .media-card{
  border: 1px solid var(--media-border, #e6e6e6);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

/* full card link */
#media .media-item{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* hover (subtle) */
#media .media-item:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* top image */
#media .media-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;     /* ???????? */
  background: #f1f1f1;
}

#media .media-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* meta row (icon + date) */
#media .media-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}

#media .media-date{
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

/* title (max 2 lines + ellipsis) */
#media .media-title{
  margin: 10px 0 0;
  padding: 0 16px 18px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .02em;

  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 2??? */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== icon (SVG via mask) =====
   1) ????????????
   2) ?? mask-image ??????dataURL?????
*/
#media .media-ico{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: currentColor;        /* ??? currentColor */
  display: inline-block;
}

/* TV icon mask */
#media .ico-tv{
  color: #d94b4b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M4%205a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2H4zm0%202h16v8H4V7zm6%2010h4v2h-4v-2z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M4%205a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2H4zm0%202h16v8H4V7zm6%2010h4v2h-4v-2z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* RADIO */
#media .ico-radio{
  color: #e67e22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M6%209h12a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2zm0%202v6h12v-6H6zm2-6l10%204-.8%201.8L7.2%207.8%208%205z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M6%209h12a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2zm0%202v6h12v-6H6zm2-6l10%204-.8%201.8L7.2%207.8%208%205z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* NEWSPAPER (gray) */
#media .ico-newspaper{
  color: #9a9a9a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M6%204h12a2%202%200%200%201%202%202v14H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm0%202v12h12V6H6zm2%202h4v4H8V8zm6%200h2v1h-2V8zm0%202h2v1h-2v-1zm0%202h2v1h-2v-1z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M6%204h12a2%202%200%200%201%202%202v14H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm0%202v12h12V6H6zm2%202h4v4H8V8zm6%200h2v1h-2V8zm0%202h2v1h-2v-1zm0%202h2v1h-2v-1z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* MAGAZINE (green / open book) */
#media .ico-magazine{
  color: #2e9b57;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M3%206a3%203%200%200%201%203-3h6v15H6a3%203%200%200%200-3%203V6zm18%200a3%203%200%200%200-3-3h-6v15h6a3%203%200%200%201%203%203V6z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M3%206a3%203%200%200%201%203-3h6v15H6a3%203%200%200%200-3%203V6zm18%200a3%203%200%200%200-3-3h-6v15h6a3%203%200%200%201%203%203V6z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* WEB */
#media .ico-web{
  color: #2980b9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm7.9%209H14.5c-.2-2.5-1-4.7-2.2-6.2A8%208%200%200%201%2019.9%2011zM12%204.2c1.4%201.6%202.3%204.2%202.5%206.8h-5C9.7%208.4%2010.6%205.8%2012%204.2zM4.1%2013h5.4c.2%202.5%201%204.7%202.2%206.2A8%208%200%200%201%204.1%2013zm5.4-2H4.1A8%208%200%200%201%2011.7%204.8C10.5%206.3%209.7%208.5%209.5%2011zm2.5%208.8c-1.4-1.6-2.3-4.2-2.5-6.8h5c-.2%202.6-1.1%205.2-2.5%206.8zM14.5%2013h5.4a8%208%200%200%201-7.6%206.2c1.2-1.5%202-3.7%202.2-6.2z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm7.9%209H14.5c-.2-2.5-1-4.7-2.2-6.2A8%208%200%200%201%2019.9%2011zM12%204.2c1.4%201.6%202.3%204.2%202.5%206.8h-5C9.7%208.4%2010.6%205.8%2012%204.2zM4.1%2013h5.4c.2%202.5%201%204.7%202.2%206.2A8%208%200%200%201%204.1%2013zm5.4-2H4.1A8%208%200%200%201%2011.7%204.8C10.5%206.3%209.7%208.5%209.5%2011zm2.5%208.8c-1.4-1.6-2.3-4.2-2.5-6.8h5c-.2%202.6-1.1%205.2-2.5%206.8zM14.5%2013h5.4a8%208%200%200%201-7.6%206.2c1.2-1.5%202-3.7%202.2-6.2z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* left accent like screenshot (optional) */
#media .media-card.cat-tv { border-left: 6px solid #d94b4b; }
#media .media-card.cat-radio { border-left: 6px solid #e67e22; }
#media .media-card.cat-newspaper { border-left: 6px solid #9a9a9a; }
#media .media-card.cat-magazine { border-left: 6px solid #2e9b57; }
#media .media-card.cat-web { border-left: 6px solid #2980b9; }


/* ??????????????????? */
#media .media-card::before {
  content: none !important;
}

/* ===== ????????????? ===== */

/* ?????????????? */
#media .media-card {
  padding-left: 0;
}

/* ??????????????? */
#media .media-item {
  padding-left: 0;
}

/* ??????????? */
#media .media-meta {
  padding-left: 16px;   /* ?????????? */
  margin-top: 8px;      /* ?????????? */
}

/* ???????????? */
#media .media-title {
  margin-top: 6px;
}