/*
Theme Name: 0212 Media Child
Theme URI: https://0212.org/
Description: 0212.org media-style child theme for GeneratePress.
Author: 0212.org
Template: generatepress
Version: 1.0.0
Text Domain: 0212-media-child
*/

/* 01. Design Tokens */
:root {
  --0212-ink: #172033;
  --0212-text: #243044;
  --0212-muted: #697589;
  --0212-navy: #12335f;
  --0212-navy-dark: #0c2548;
  --0212-teal: #087c89;
  --0212-teal-soft: #e8f6f7;
  --0212-amber: #d99a20;
  --0212-bg: #f5f8fb;
  --0212-panel: #ffffff;
  --0212-line: #dbe5ee;
  --0212-line-dark: #b9c8d8;
  --0212-shadow: 0 14px 34px rgba(18, 51, 95, 0.08);
  --0212-shadow-soft: 0 8px 22px rgba(18, 51, 95, 0.06);
  --0212-radius: 8px;
  --0212-content: 1180px;
  --0212-readable: 780px;
}

/* 02. Base Layout */
body {
  background: var(--0212-bg);
  color: var(--0212-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.85;
  letter-spacing: 0;
}

a {
  color: var(--0212-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  color: var(--0212-navy);
}

.site.grid-container,
.site-content.grid-container,
.container.grid-container {
  max-width: var(--0212-content);
}

.site-content {
  padding: 28px 22px 64px;
}

.inside-article,
.separate-containers .comments-area,
.separate-containers .paging-navigation,
.one-container .site-content {
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  box-shadow: var(--0212-shadow);
}

.inside-article {
  padding: 40px;
}

.page .inside-article,
.single .inside-article {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

/* 03. Header And Navigation */
.site-header {
  border-bottom: 1px solid var(--0212-line);
  background: var(--0212-panel);
}

.inside-header {
  max-width: var(--0212-content);
  padding: 16px 22px;
}

.main-title a,
.site-branding a {
  color: var(--0212-navy);
  font-weight: 800;
  letter-spacing: 0;
}

.site-description {
  margin-top: 4px;
  color: var(--0212-muted);
  font-size: 13px;
}

.main-navigation,
.main-navigation ul ul {
  background: var(--0212-navy);
}

.main-navigation .inside-navigation {
  max-width: var(--0212-content);
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .menu-bar-items {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0;
  padding-right: 20px;
  padding-left: 20px;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-item:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li.sfHover > a {
  background: var(--0212-teal);
  color: #ffffff;
}

/* 04. Media Front Page */
.home .inside-article,
.front-page .inside-article {
  max-width: var(--0212-content);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.home .site-content,
.front-page .site-content,
.page .site-content {
  display: block;
}

.home .content-area,
.front-page .content-area,
.page .content-area {
  width: 100%;
}

.home #right-sidebar,
.front-page #right-sidebar,
.page #right-sidebar {
  display: none;
}

.home .entry-header,
.front-page .entry-header {
  display: none;
}

.home .entry-title,
.front-page .entry-title {
  max-width: 820px;
  color: var(--0212-navy);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.25;
}

.home .entry-content > p:first-of-type,
.front-page .entry-content > p:first-of-type {
  max-width: 760px;
  color: var(--0212-text);
  font-size: 18px;
  line-height: 1.9;
}

.home .wp-block-columns,
.front-page .wp-block-columns {
  gap: 24px;
}

.media-home {
  display: grid;
  gap: 24px;
}

.media-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
  gap: 24px;
  align-items: stretch;
  border: 1px solid var(--0212-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--0212-shadow);
  padding: 38px;
}

.media-hero-simple {
  grid-template-columns: minmax(0, 1fr);
}

.media-hero-simple .media-hero-lead {
  max-width: 900px;
  margin-bottom: 0;
}

.media-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--0212-line);
  border-radius: 999px;
  background: var(--0212-teal-soft);
  color: var(--0212-teal);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  padding: 6px 12px;
}

.media-hero h1 {
  max-width: 760px;
  margin: 16px 0 16px;
  color: var(--0212-navy);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.25;
}

.media-hero-lead {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--0212-text);
  font-size: 16px;
  line-height: 1.95;
}

.media-hero-actions,
.media-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.media-button,
.media-button-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  padding: 10px 18px;
}

.media-button {
  background: var(--0212-navy);
  color: #ffffff;
}

.media-button-sub {
  border: 1px solid var(--0212-line-dark);
  background: #ffffff;
  color: var(--0212-navy);
}

.media-button:hover,
.media-button:focus {
  background: var(--0212-teal);
  color: #ffffff;
}

.media-button-sub:hover,
.media-button-sub:focus {
  border-color: var(--0212-teal);
  color: var(--0212-teal);
}

.media-hero-panel {
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #f8fbfd;
  padding: 22px;
}

.media-hero-panel-title {
  margin-bottom: 14px;
  color: var(--0212-navy);
  font-size: 18px;
  font-weight: 800;
}

.media-hero-panel ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-hero-panel li {
  border-bottom: 1px solid var(--0212-line);
  color: var(--0212-text);
  font-size: 14px;
  line-height: 1.7;
  padding-bottom: 10px;
}

.media-hero-panel li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.media-section {
  border: 1px solid var(--0212-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--0212-shadow-soft);
  padding: 30px;
}

.media-section-head {
  justify-content: space-between;
  margin-bottom: 20px;
}

.media-section h2 {
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--0212-navy);
  font-size: 25px;
}

.media-core-section h2,
.media-topic-section h2,
.media-check-section h2 {
  margin-bottom: 18px;
}

.media-section-lead {
  max-width: 760px;
  margin: -8px 0 22px;
  color: var(--0212-muted);
  font-size: 15px;
  line-height: 1.8;
}

.media-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.media-home > br,
.media-hero br,
.media-section br,
.media-card-grid > br,
.media-feature-grid > br,
.media-stack > br,
.media-mini-grid > br,
.media-card br,
.media-article-card br {
  display: none;
}

.media-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
}

.media-pick-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
  color: var(--0212-text);
  text-decoration: none;
}

.media-pick-card:hover,
.media-pick-card:focus {
  border-color: var(--0212-teal);
  box-shadow: var(--0212-shadow-soft);
  color: var(--0212-text);
}

.media-pick-card-primary {
  grid-template-rows: auto 1fr;
}

.media-pick-card-row {
  grid-template-columns: 180px minmax(0, 1fr);
}

.media-thumb {
  display: block;
  overflow: hidden;
  background: #f8fbfd;
}

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

.media-pick-card-primary .media-thumb img {
  aspect-ratio: 16 / 9;
}

.media-pick-body {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px;
}

.media-meta {
  color: var(--0212-teal);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.media-pick-title {
  color: var(--0212-navy);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.55;
}

.media-pick-card-primary .media-pick-title {
  font-size: 25px;
  line-height: 1.45;
}

.media-pick-text {
  color: var(--0212-muted);
  font-size: 14px;
  line-height: 1.75;
}

.media-link-list {
  display: grid;
  gap: 12px;
}

.media-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.media-core-card {
  display: grid;
  gap: 12px;
  min-height: 220px;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #f8fbfd;
  color: var(--0212-text);
  text-decoration: none;
  padding: 24px;
}

.media-core-card:hover,
.media-core-card:focus {
  border-color: var(--0212-teal);
  box-shadow: var(--0212-shadow-soft);
  color: var(--0212-text);
}

.media-core-number {
  color: var(--0212-teal);
  font-size: 13px;
  font-weight: 800;
}

.media-core-title {
  color: var(--0212-navy);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
}

.media-core-text {
  color: var(--0212-muted);
  font-size: 15px;
  line-height: 1.8;
}

.media-home-article-list {
  display: grid;
  gap: 16px;
}

.media-home-article {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
  color: var(--0212-text);
  text-decoration: none;
}

.media-home-article-featured {
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
}

.media-home-article:hover,
.media-home-article:focus {
  border-color: var(--0212-teal);
  box-shadow: var(--0212-shadow-soft);
  color: var(--0212-text);
}

.media-home-thumb {
  display: grid;
  align-items: center;
  min-height: 190px;
  border-right: 1px solid var(--0212-line);
  background: #eef6fb;
  padding: 14px;
}

.media-home-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  border: 1px solid var(--0212-line);
  border-radius: 6px;
  background: #ffffff;
  object-fit: contain;
}

.media-home-body {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
}

.media-home-title {
  color: var(--0212-navy);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}

.media-home-article-featured .media-home-title {
  font-size: 26px;
}

.media-home-text {
  color: var(--0212-text);
  font-size: 15px;
  line-height: 1.85;
}

.media-home-note {
  border-top: 1px solid var(--0212-line);
  color: var(--0212-muted);
  font-size: 13px;
  line-height: 1.65;
  padding-top: 10px;
}

.media-topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.media-topic-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--0212-line);
  border-radius: 999px;
  background: #f8fbfd;
  color: var(--0212-navy);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  padding: 8px 16px;
}

.media-topic-grid a:hover,
.media-topic-grid a:focus {
  border-color: var(--0212-teal);
  color: var(--0212-teal);
}

.media-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-check-list li {
  position: relative;
  border-bottom: 1px solid var(--0212-line);
  color: var(--0212-text);
  font-size: 16px;
  line-height: 1.75;
  padding: 14px 0 14px 34px;
}

.media-check-list li::before {
  position: absolute;
  top: 17px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-items: center;
  border-radius: 999px;
  background: var(--0212-teal);
  color: #ffffff;
  content: "✓";
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.media-close-section p {
  max-width: 880px;
  margin: 0;
  color: var(--0212-text);
  font-size: 16px;
  line-height: 1.9;
}

.media-card,
.media-article-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
  color: var(--0212-text);
  text-decoration: none;
  padding: 20px;
}

.media-card {
  min-height: 190px;
}

.media-card:hover,
.media-card:focus,
.media-article-card:hover,
.media-article-card:focus {
  border-color: var(--0212-teal);
  box-shadow: var(--0212-shadow-soft);
  color: var(--0212-text);
}

.media-card-label,
.media-article-label {
  margin-bottom: 10px;
  color: var(--0212-teal);
  font-size: 12px;
  font-weight: 800;
}

.media-card-title,
.media-article-title {
  color: var(--0212-navy);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
}

.media-card-text,
.media-article-text {
  margin-top: 10px;
  color: var(--0212-muted);
  font-size: 14px;
  line-height: 1.75;
}

.media-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

.media-feature-primary {
  border-color: var(--0212-navy);
  background: #f8fbfd;
}

.media-feature-primary .media-article-title {
  font-size: 24px;
}

.media-stack {
  display: grid;
  gap: 14px;
}

.media-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.media-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.media-route {
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #f8fbfd;
  padding: 18px;
}

.media-route h3 {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
  color: var(--0212-navy);
  font-size: 18px;
}

.media-route p {
  margin: 0;
  color: var(--0212-muted);
  font-size: 14px;
  line-height: 1.75;
}

.media-compare-table {
  width: 100%;
  border: 1px solid var(--0212-line-dark);
  border-collapse: collapse;
  font-size: 14px;
}

.media-compare-table th {
  background: var(--0212-navy);
  color: #ffffff;
  font-weight: 800;
}

.media-compare-table th,
.media-compare-table td {
  border: 1px solid var(--0212-line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

.media-compare-table tbody tr:nth-child(even) td {
  background: #f8fbfd;
}

/* 05. Article Typography */
.entry-title {
  color: var(--0212-ink);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.35;
  letter-spacing: 0;
}

.single .entry-title {
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.45;
}

.entry-meta,
.entry-meta a,
.cat-links,
.tags-links {
  color: var(--0212-muted);
  font-size: 13px;
}

.single .entry-meta {
  display: none;
}

.entry-content {
  max-width: var(--0212-readable);
  margin-right: auto;
  margin-left: auto;
}

.home .entry-content,
.front-page .entry-content {
  max-width: var(--0212-content);
}

.page .entry-content {
  max-width: 940px;
}

.home.page .entry-content,
.front-page.page .entry-content {
  max-width: var(--0212-content);
}

.entry-content p {
  margin-bottom: 1.45em;
}

.entry-content h2 {
  border-top: 3px solid var(--0212-navy);
  padding-top: 18px;
  margin-top: 2.4em;
  margin-bottom: 0.9em;
  color: var(--0212-navy);
  font-size: 26px;
  line-height: 1.45;
}

.entry-content h3 {
  border-left: 5px solid var(--0212-teal);
  padding-left: 12px;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--0212-ink);
  font-size: 20px;
  line-height: 1.55;
}

.entry-content h4 {
  margin-top: 1.7em;
  color: var(--0212-ink);
  font-size: 17px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.35em;
  margin-bottom: 1.5em;
}

.entry-content li + li {
  margin-top: 0.42em;
}

.entry-content strong {
  color: var(--0212-ink);
}

/* 06. Featured Images And Media */
.featured-image,
.post-image,
.entry-content > .wp-block-image:first-child {
  margin-bottom: 28px;
}

.home .featured-image,
.front-page .featured-image,
.home .post-image,
.front-page .post-image {
  display: none;
}

.featured-image img,
.post-image img,
.entry-content .wp-block-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
}

.single .featured-image img,
.single .post-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page .featured-image,
.page .post-image {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #eef6fb;
  padding: 14px;
}

.page .featured-image img,
.page .post-image img {
  display: block;
  max-height: none;
  border: 1px solid var(--0212-line);
  background: #ffffff;
  object-fit: contain;
}

figcaption,
.wp-block-image figcaption,
.wp-block-table figcaption {
  color: var(--0212-muted);
  font-size: 13px;
  text-align: left;
}

/* 07. Tables And Research Blocks */
.wp-block-table {
  width: 100%;
  margin: 28px 0;
  overflow-x: auto;
}

.wp-block-table table {
  width: 100%;
  min-width: 680px;
  border: 1px solid var(--0212-line-dark);
  border-collapse: collapse;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.75;
}

.wp-block-table th {
  border: 1px solid var(--0212-line-dark);
  background: var(--0212-navy);
  color: #ffffff;
  font-weight: 800;
  text-align: left;
  vertical-align: top;
}

.wp-block-table td {
  border: 1px solid var(--0212-line);
  color: var(--0212-text);
  vertical-align: top;
}

.wp-block-table th,
.wp-block-table td {
  padding: 12px 14px;
}

.wp-block-table tbody tr:nth-child(even) td {
  background: #f8fbfd;
}

.wp-block-table tbody th {
  width: 24%;
  background: var(--0212-teal-soft);
  color: var(--0212-navy);
}

/* 08. Article Lists And Cards */
.post,
.page-header,
.archive .inside-article,
.blog .inside-article,
.search .inside-article {
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
}

.archive .inside-article,
.blog .inside-article,
.search .inside-article {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 26px;
  box-shadow: var(--0212-shadow-soft);
}

.archive .entry-title,
.blog .entry-title,
.search .entry-title {
  font-size: 25px;
  line-height: 1.45;
}

.archive .entry-summary,
.blog .entry-summary,
.search .entry-summary {
  color: var(--0212-text);
  font-size: 16px;
  line-height: 1.9;
}

.page-header {
  padding: 28px;
  box-shadow: var(--0212-shadow);
}

.page-header h1 {
  margin-bottom: 8px;
  color: var(--0212-navy);
  font-size: 32px;
}

.archive .post-image,
.blog .post-image,
.search .post-image {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  align-items: center;
  margin: 0;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #eef6fb;
  padding: 12px;
}

.archive .entry-header,
.blog .entry-header,
.search .entry-header {
  grid-column: 2;
  grid-row: 1;
}

.archive .entry-summary,
.blog .entry-summary,
.search .entry-summary {
  grid-column: 2;
  grid-row: 2;
}

.archive footer.entry-meta,
.blog footer.entry-meta,
.search footer.entry-meta {
  grid-column: 2;
  grid-row: 4;
}

.archive .entry-meta,
.blog .entry-meta,
.search .entry-meta {
  display: none;
}

.archive .post-image img,
.blog .post-image img,
.search .post-image img {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--0212-line);
  background: #ffffff;
  object-fit: contain;
}

.archive .entry-summary p,
.blog .entry-summary p,
.search .entry-summary p {
  margin-bottom: 0;
}

.media-archive-label {
  grid-column: 2;
  grid-row: 2;
  width: fit-content;
  border: 1px solid var(--0212-line);
  border-radius: 999px;
  background: var(--0212-teal-soft);
  color: var(--0212-teal);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  padding: 5px 11px;
}

.media-archive-takeaway {
  grid-column: 2;
  grid-row: 4;
  border-top: 1px solid var(--0212-line);
  color: var(--0212-muted);
  font-size: 13px;
  line-height: 1.65;
  padding-top: 10px;
}

.archive .entry-summary,
.blog .entry-summary,
.search .entry-summary {
  grid-row: 3;
}

/* 09. Buttons And Calls To Action */
.wp-block-button__link,
.button,
button,
input[type="submit"] {
  border-radius: 6px;
  background: var(--0212-navy);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: var(--0212-teal);
  color: #ffffff;
}

.entry-content .wp-block-buttons {
  margin-top: 24px;
  margin-bottom: 28px;
}

.entry-content .wp-block-quote {
  border-left: 5px solid var(--0212-amber);
  padding: 16px 20px;
  background: #fff9eb;
  color: var(--0212-text);
}

.media-related {
  max-width: var(--0212-readable);
  margin: 56px auto 0;
  border-top: 1px solid var(--0212-line);
  padding-top: 28px;
}

.media-related-head {
  margin-bottom: 18px;
}

.media-related h2 {
  border: 0;
  margin: 12px 0 0;
  padding: 0;
  font-size: 24px;
}

.media-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.media-related-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
  color: var(--0212-navy);
  text-decoration: none;
}

.media-related-card:hover,
.media-related-card:focus {
  border-color: var(--0212-teal);
  box-shadow: var(--0212-shadow-soft);
}

.media-related-thumb {
  display: block;
  background: #f8fbfd;
}

.media-related-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.media-related-title {
  display: block;
  font-weight: 800;
  line-height: 1.55;
  padding: 14px;
}

/* 10. Sidebars And Footer */
.sidebar .widget,
.site-footer {
  border: 1px solid var(--0212-line);
  border-radius: var(--0212-radius);
  background: #ffffff;
}

#text-2 {
  display: none;
}

.sidebar .widget-title {
  color: var(--0212-navy);
  font-size: 17px;
}

.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagcloud a {
  display: inline-flex;
  border: 1px solid var(--0212-line);
  border-radius: 999px;
  background: #f8fbfd;
  color: var(--0212-navy);
  font-size: 13px !important;
  line-height: 1.4;
  text-decoration: none;
  padding: 6px 10px;
}

.site-footer {
  border-radius: 0;
}

.footer-widgets,
.site-info {
  background: var(--0212-navy-dark);
  color: #ffffff;
}

.footer-widgets a,
.site-info a {
  color: #ffffff;
}

/* 11. Responsive */
@media (max-width: 768px) {
  .site-content {
    padding: 18px 12px 42px;
  }

  .inside-header {
    padding: 14px 16px;
  }

  .inside-article,
  .archive .inside-article,
  .blog .inside-article,
  .search .inside-article,
  .page-header {
    padding: 24px 18px;
  }

  .entry-title {
    font-size: 28px;
  }

  .entry-content h2 {
    font-size: 23px;
  }

  .entry-content h3 {
    font-size: 18px;
  }

  .wp-block-table {
    margin-right: -18px;
    margin-left: -18px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .wp-block-table table {
    min-width: 640px;
  }

  .media-hero,
  .media-feature-grid,
  .media-card-grid,
  .media-core-grid,
  .media-mini-grid,
  .media-cover-grid,
  .media-home-article,
  .media-home-article-featured,
  .media-check-list,
  .media-route-grid,
  .media-related-grid {
    grid-template-columns: 1fr;
  }

  .media-pick-card-row {
    grid-template-columns: 1fr;
  }

  .media-hero,
  .media-section {
    padding: 24px 18px;
  }

  .media-hero h1 {
    font-size: 30px;
  }

  .media-home-thumb {
    border-right: 0;
    border-bottom: 1px solid var(--0212-line);
  }

  .media-home-body {
    padding: 20px 18px;
  }

  .media-home-title,
  .media-home-article-featured .media-home-title {
    font-size: 21px;
  }

  .media-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-compare-table {
    min-width: 640px;
  }

  .page .featured-image img,
  .page .post-image img {
    max-height: none;
  }

  .archive .inside-article,
  .blog .inside-article,
  .search .inside-article {
    grid-template-columns: 1fr;
  }

  .archive .post-image,
  .blog .post-image,
  .search .post-image,
  .archive .entry-header,
  .blog .entry-header,
  .search .entry-header,
  .archive .entry-summary,
  .blog .entry-summary,
  .search .entry-summary,
  .media-archive-label,
  .media-archive-takeaway,
  .archive footer.entry-meta,
  .blog footer.entry-meta,
  .search footer.entry-meta {
    grid-column: 1;
  }

  .archive .entry-header,
  .blog .entry-header,
  .search .entry-header,
  .media-archive-label,
  .archive .entry-summary,
  .blog .entry-summary,
  .search .entry-summary,
  .media-archive-takeaway {
    grid-row: auto;
  }
}