@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   Supsystic blog archive — November 2026 (templates/blog/archive2.php)
   Builds on templates/hp/style2.css (.hp2).
   ═══════════════════════════════════════════════════════════════════ */

/* the theme prints breadcrumbs under the header; the hero replaces them here */
.post-type-archive-blog .breadcrumbs-wrapper, .category .breadcrumbs-wrapper{ display: none; }

/* ─── Hero ─── */
.bl2HeroIn{ position: relative; z-index: 2; padding-top: 76px; padding-bottom: 56px; text-align: center; }
.bl2Hero .hp2Badge{ margin-left: auto; margin-right: auto; }
.bl2Hero .hp2HeroTitle{ max-width: 900px; margin-left: auto; margin-right: auto; font-size: clamp(34px, 4vw, 54px); }
.bl2Hero .hp2HeroSub{ max-width: 720px; margin-left: auto; margin-right: auto; }
.bl2Back{ margin-top: 28px; }

/* ─── Cards ─── */
.bl2List{ padding-top: 64px; }
.bl2Top{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.bl2Side{ display: grid; gap: 24px; }
.bl2Grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bl2Card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--hp-border);
  box-shadow: 0 18px 40px -34px rgba(30, 45, 61, 0.5);
  transition: var(--hp-t);
}
.bl2Card:hover{ transform: translateY(-4px); border-color: #b9cde0; box-shadow: 0 30px 60px -36px rgba(30, 45, 61, 0.55); }
.bl2Pic{ position: relative; display: block; aspect-ratio: 1.91 / 1; overflow: hidden; background: linear-gradient(135deg, #eef3f9, #e3ecf5); }
.bl2Pic img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--hp-ease); }
.bl2Pic.is-wide img{ object-fit: contain; padding: 4%; }
.bl2CardLead .bl2Pic.is-wide img, .bl2CardSide .bl2Pic.is-wide img{ object-fit: cover; padding: 0; }
.bl2Pic.is-empty::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(82, 186, 197, 0.25), transparent 60%), linear-gradient(135deg, #1a2333, #0f1720); }
.bl2Card:hover .bl2Pic img{ transform: scale(1.04); }
.bl2Body{ display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.bl2Meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--hp-text3); }
.bl2Cat{
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hp-brand) !important;
  text-decoration: none !important;
  background: rgba(13, 131, 141, 0.08);
  box-shadow: inset 0 0 0 1px rgba(13, 131, 141, 0.2);
}
.bl2Cat:hover{ background: rgba(13, 131, 141, 0.16); }
.bl2Read{ display: inline-flex; align-items: center; gap: 5px; }
.bl2Read svg{ width: 13px; height: 13px; }
.bl2Title{ margin-top: 12px; font-family: var(--hp-font-h); font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.bl2Title a{ color: var(--hp-navy) !important; text-decoration: none !important; }
.bl2Title a:hover{ color: var(--hp-brand) !important; }
/* the whole card is clickable through the title link */
.bl2Title a::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.bl2Cat, .bl2More{ position: relative; z-index: 2; }
.bl2Excerpt{ margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--hp-text2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl2More{ display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--hp-brand) !important; text-decoration: none !important; }
.bl2More svg{ width: 14px; height: 14px; transition: transform 0.2s; }
.bl2Card:hover .bl2More svg{ transform: translateX(3px); }

/* featured post */
.bl2CardLead .bl2Pic{ aspect-ratio: 1.91 / 1; }
.bl2CardLead .bl2Body{ padding: 26px 30px 30px; }
.bl2CardLead .bl2Title{ font-size: clamp(22px, 2.2vw, 30px); line-height: 1.22; letter-spacing: -0.02em; }
.bl2CardLead .bl2Excerpt{ font-size: 15.5px; -webkit-line-clamp: 4; }
.bl2CardLead::before{
  content: "Latest";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--hp-amber);
  box-shadow: 0 8px 20px -8px rgba(255, 190, 43, 0.9);
}
/* posts next to the featured one: picture on top, short body */
.bl2CardSide .bl2Pic{ aspect-ratio: 2.4 / 1; }
.bl2CardSide .bl2Body{ padding: 16px 20px 18px; }
.bl2CardSide .bl2Title{ margin-top: 10px; font-size: 17px; }
.bl2CardSide .bl2More{ padding-top: 10px; }

/* ─── Pagination ─── */
.bl2Pager{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.bl2Pager .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-navy) !important;
  text-decoration: none !important;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hp-border);
  transition: var(--hp-t);
}
.bl2Pager a.page-numbers:hover{ color: var(--hp-brand) !important; box-shadow: inset 0 0 0 1.5px var(--hp-brand-l); }
.bl2Pager .page-numbers.current{ color: #fff !important; background: var(--hp-navy); box-shadow: 0 10px 24px -12px rgba(30, 45, 61, 0.8); }
.bl2Pager .page-numbers.dots{ background: transparent; box-shadow: none; min-width: 24px; padding: 0; }
.bl2Pager .prev, .bl2Pager .next{ gap: 6px; padding: 0 18px; }

.bl2Empty{ max-width: 560px; margin: 0 auto; text-align: center; }
.bl2Empty .hp2Lead{ margin: 12px 0 24px; }

/* ─── Responsive ─── */
@media (max-width: 1100px){
  .bl2Top{ grid-template-columns: 1fr; }
  .bl2Side{ grid-template-columns: 1fr 1fr; }
  .bl2Grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .bl2HeroIn{ padding-top: 56px; padding-bottom: 40px; }
  .bl2List{ padding-top: 40px; }
  .bl2Side, .bl2Grid{ grid-template-columns: 1fr; }
  .bl2Top, .bl2Side, .bl2Grid{ gap: 18px; }
  .bl2CardLead .bl2Body{ padding: 20px 20px 22px; }
  .bl2Pager .prev, .bl2Pager .next{ padding: 0 14px; }
}