/* Desktop archive/category/search layout for Cocoon. Mobile keeps the theme's proven layout. */
@media (min-width: 761px) {
  body.archive,
  body.blog,
  body.search {
    background:
      radial-gradient(circle at 78% 0%, rgba(36, 107, 255, 0.13), transparent 34rem),
      radial-gradient(circle at 12% 26%, rgba(71, 223, 243, 0.07), transparent 28rem),
      #030812 !important;
    color: #0b1726;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  }

  body.archive #content,
  body.blog #content,
  body.search #content {
    width: min(1180px, calc(100% - 64px));
    margin: 54px auto 88px;
  }

  body.archive #content-in,
  body.blog #content-in,
  body.search #content-in {
    display: block !important;
    width: 100% !important;
  }

  body.archive main.main,
  body.blog main.main,
  body.search main.main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 46px !important;
    border: 1px solid rgba(164, 215, 232, 0.22) !important;
    border-radius: 28px !important;
    background: rgba(248, 251, 255, 0.97) !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.36) !important;
  }

  body.archive #sidebar,
  body.blog #sidebar,
  body.search #sidebar {
    display: none !important;
  }

  body.archive .list-title,
  body.blog .list-title,
  body.search .list-title,
  body.archive .archive-title,
  body.blog .archive-title,
  body.search .archive-title {
    margin: 0 0 30px !important;
    padding: 0 0 22px !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe5ee !important;
    background: transparent !important;
    color: #0b1726 !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.035em;
  }

  /*
   * Cocoon can leave the blog index in its three-column vertical-card mode
   * (for example .ect-vertical-card-3). The row-card rules below then run
   * inside a one-third-width tile: the thumbnail's 220px minimum plus the
   * content padding leaves effectively no room for the title or excerpt.
   * Reset the list and every card to a true full-width single column first.
   */
  body.archive #list,
  body.blog #list,
  body.search #list,
  body.archive .list,
  body.blog .list,
  body.search .list {
    display: block !important;
    grid-template-columns: none !important;
  }

  body.archive .entry-card-wrap,
  body.blog .entry-card-wrap,
  body.search .entry-card-wrap {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 1px solid #dbe5ee !important;
    border-radius: 18px !important;
    background: #fff !important;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(23, 47, 70, 0.08);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }

  body.archive .entry-card-wrap:hover,
  body.blog .entry-card-wrap:hover,
  body.search .entry-card-wrap:hover {
    transform: translateY(-3px);
    border-color: rgba(36, 107, 255, 0.42) !important;
    box-shadow: 0 20px 44px rgba(23, 47, 70, 0.14);
  }

  body.archive .entry-card,
  body.blog .entry-card,
  body.search .entry-card {
    display: grid !important;
    grid-template-columns: minmax(220px, 31%) minmax(0, 1fr);
    gap: 0 !important;
    min-height: 210px;
    padding: 0 !important;
  }

  body.archive .entry-card-thumb,
  body.blog .entry-card-thumb,
  body.search .entry-card-thumb {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  body.archive .entry-card-thumb img,
  body.blog .entry-card-thumb img,
  body.search .entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px;
    object-fit: cover;
  }

  body.archive .entry-card-content,
  body.blog .entry-card-content,
  body.search .entry-card-content {
    display: block !important;
    min-width: 0;
    padding: 28px 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.archive .entry-card-title,
  body.blog .entry-card-title,
  body.search .entry-card-title {
    margin: 0 0 13px !important;
    color: #0b1726 !important;
    font-size: clamp(21px, 2.1vw, 28px) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.025em;
  }

  body.archive .entry-card-snippet,
  body.blog .entry-card-snippet,
  body.search .entry-card-snippet {
    margin: 0 0 18px !important;
    color: #526578 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  body.archive .entry-card-meta,
  body.blog .entry-card-meta,
  body.search .entry-card-meta {
    color: #68798b !important;
    font-size: 12px !important;
  }

  body.archive .pagination,
  body.blog .pagination,
  body.search .pagination {
    margin-top: 34px;
  }
}