/* ============================================================
   Blocksy Theme — Home Page Masonry Overrides
   ============================================================ */

/* Hero badge */
.pen-hero::before { pointer-events: none; }

/* Poet Week box dark overlay styles already in style.css */

/* Countries box accent border */
.pen-countries-box { border-top: 3px solid var(--blk-color-primary); }
.pen-eras-box      { border-top: 3px solid var(--blk-color-accent); }
.pen-featured-poets-box { border-top: 3px solid var(--blk-color-success, #10b981); }

/* Meters, Purposes, Rhymes colored markers */
.pen-title-meter::before { background: linear-gradient(to bottom, #7c3aed, #a855f7) !important; }
.pen-title-purpose::before { background: linear-gradient(to bottom, #059669, #10b981) !important; }
.pen-title-rhyme::before { background: linear-gradient(to bottom, #dc2626, #f87171) !important; }

/* Contributors highlight pill */
.pen-contributors-box .pen-tag-pill:first-child {
  background: var(--blk-color-primary-light);
  color: var(--blk-color-primary) !important;
  border-color: var(--blk-color-primary);
}

/* ============================================================
   Home polish layer - modern Blocksy feel without markup changes
   ============================================================ */

:root {
  --blk-home-bg: #f6f8fb;
  --blk-home-surface: rgba(255, 255, 255, 0.86);
  --blk-home-border: rgba(30, 64, 175, 0.11);
  --blk-home-text-soft: #64748b;
  --blk-home-teal: #0f766e;
  --blk-home-rose: #be123c;
  --blk-home-violet: #6d28d9;
  --blk-home-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --blk-home-shadow-hover: 0 24px 60px rgba(30, 64, 175, 0.13);
}

body.pen-template-home {
  background:
    linear-gradient(180deg, #eef4ff 0, var(--blk-home-bg) 360px),
    var(--blk-home-bg);
}

body.pen-template-home .pen-main {
  isolation: isolate;
}

.pen-hero {
  min-height: clamp(480px, 63vh, 680px);
  display: grid;
  align-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 58, 138, 0.92) 52%, rgba(15, 118, 110, 0.82)),
    linear-gradient(45deg, #0f172a, #1e3a8a);
}

.pen-hero::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.82), transparent 86%);
  opacity: 0.55;
}

.pen-hero::after {
  height: 96px;
  background:
    linear-gradient(180deg, transparent 0, var(--blk-home-bg) 68%),
    var(--blk-home-bg);
  clip-path: polygon(0 45%, 18% 62%, 42% 48%, 68% 67%, 100% 45%, 100% 100%, 0 100%);
}

.pen-hero-inner {
  max-width: 900px;
}

.pen-hero-title {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 12px 38px rgba(0, 0, 0, 0.32);
}

.pen-hero-desc {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  text-wrap: pretty;
}

.pen-hero-search-form {
  max-width: 760px;
  min-height: 64px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.22);
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  body.pen-template-home .pen-hero-search-form,
  body.pen-template-home .pen-home-box,
  body.pen-template-home .pen-alpha-btn,
  body.pen-template-home .pen-tag-pill,
  body.pen-template-home .pen-list-item,
  body.pen-template-home .pen-latest-poem-pill {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

.pen-hero-search-input {
  font-size: 1.02rem;
}

.pen-hero-search-submit,
.pen-hero .pen-btn-primary,
.pen-quote-btn,
.pen-poet-week-btn {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #17120a !important;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.28);
}

.pen-hero-search-submit:hover,
.pen-hero .pen-btn-primary:hover,
.pen-quote-btn:hover,
.pen-poet-week-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #fb7185);
  color: #17120a !important;
}

.pen-hero .pen-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff !important;
}

.pen-hero .pen-btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--blk-color-primary) !important;
}

body.pen-template-home .pen-container {
  position: relative;
  margin-top: -42px;
  padding-top: 0;
}

.pen-home-grid {
  gap: clamp(1rem, 2vw, 1.55rem);
  margin-bottom: clamp(1rem, 2.4vw, 2rem);
}

.pen-home-box {
  position: relative;
  overflow: hidden;
  background: var(--blk-home-surface);
  border: 1px solid var(--blk-home-border);
  border-radius: 18px;
  box-shadow: var(--blk-home-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.pen-home-box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.42), transparent 35%);
  opacity: 0.85;
}

.pen-home-box > * {
  position: relative;
  z-index: 1;
}

.pen-home-box:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 64, 175, 0.2);
  box-shadow: var(--blk-home-shadow-hover);
}

.pen-home-box-title {
  color: #0f172a;
  letter-spacing: 0;
  text-wrap: balance;
}

.pen-home-box-title svg {
  color: var(--blk-color-primary);
  filter: drop-shadow(0 8px 14px rgba(30,64,175,0.14));
}

.pen-verse-day-box {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239, 246, 255, 0.78)),
    var(--blk-home-surface);
}

.pen-verse-display-grid {
  min-height: 210px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.9) 56%, rgba(15, 118, 110, 0.9));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 42px rgba(15,23,42,0.16);
}

.pen-verse-display-grid::before {
  content: '99';
  top: -14px;
  right: 24px;
  font-size: 7rem;
  color: rgba(255,255,255,0.07);
}

.pen-verse-hemistich p {
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  text-wrap: balance;
}

.pen-verse-source-bar,
.pen-list-item,
.pen-latest-poem-pill {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(148, 163, 184, 0.24);
}

.pen-poet-week-box {
  background:
    linear-gradient(145deg, rgba(30,64,175,0.98), rgba(15,118,110,0.9)),
    #1e40af;
  border-color: rgba(255,255,255,0.16);
}

.pen-poet-week-circle {
  box-shadow: 0 24px 55px rgba(15,23,42,0.22);
}

.pen-countries-box,
.pen-eras-box,
.pen-featured-poets-box,
.pen-meters-box,
.pen-purposes-box,
.pen-rhymes-box {
  border-top-width: 1px;
}

.pen-countries-box { box-shadow: inset 0 3px 0 var(--blk-color-primary), var(--blk-home-shadow); }
.pen-eras-box { box-shadow: inset 0 3px 0 var(--blk-color-accent), var(--blk-home-shadow); }
.pen-featured-poets-box { box-shadow: inset 0 3px 0 var(--blk-home-teal), var(--blk-home-shadow); }
.pen-meters-box { box-shadow: inset 0 3px 0 var(--blk-home-violet), var(--blk-home-shadow); }
.pen-purposes-box { box-shadow: inset 0 3px 0 var(--blk-home-teal), var(--blk-home-shadow); }
.pen-rhymes-box { box-shadow: inset 0 3px 0 var(--blk-home-rose), var(--blk-home-shadow); }

.pen-countries-box:hover,
.pen-eras-box:hover,
.pen-featured-poets-box:hover,
.pen-meters-box:hover,
.pen-purposes-box:hover,
.pen-rhymes-box:hover {
  box-shadow: inset 0 3px 0 currentColor, var(--blk-home-shadow-hover);
}

.pen-list-grid {
  gap: 0.7rem;
}

.pen-list-item,
.pen-alpha-btn,
.pen-tag-pill,
.pen-latest-poem-pill {
  border-radius: 12px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pen-list-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: #172033 !important;
}

.pen-list-item:hover,
.pen-latest-poem-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(30,64,175,0.1);
}

.pen-home-alphabet {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(236,253,245,0.7)),
    var(--blk-home-surface);
}

.pen-alphabet-inner {
  align-items: center;
}

.pen-alpha-btn {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15, 118, 110, 0.16);
  color: #0f172a !important;
}

.pen-alpha-btn:hover {
  background: var(--blk-home-teal);
  border-color: var(--blk-home-teal);
  transform: translateY(-2px) scale(1.04);
}

.pen-tag-pill {
  min-height: 34px;
  background: rgba(255,255,255,0.7);
  border-color: rgba(100,116,139,0.18);
  color: var(--blk-home-text-soft) !important;
}

.pen-tag-pill:hover {
  background: #ecfdf5;
  border-color: var(--blk-home-teal);
  color: var(--blk-home-teal) !important;
}

.pen-quote-box {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,247,237,0.72)),
    var(--blk-home-surface);
}

.pen-quote-icon {
  color: rgba(245, 158, 11, 0.17);
}

.pen-quote-text {
  border-right-color: var(--blk-color-accent);
  text-wrap: pretty;
}

.pen-latest-poem-pill {
  border-right-width: 4px;
}

.pen-home-view-all {
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  background: rgba(30, 64, 175, 0.07);
}

.pen-home-view-all:hover {
  background: rgba(30, 64, 175, 0.12);
}

@media (max-width: 1024px) {
  body.pen-template-home .pen-container {
    margin-top: -30px;
  }

  .pen-home-box {
    border-radius: 16px;
  }
}

@media (max-width: 768px) {
  .pen-hero {
    min-height: 520px;
    padding: 4.5rem 1.1rem 5rem;
  }

  .pen-hero-search-form {
    min-height: auto;
    padding: 0.55rem;
    gap: 0.35rem;
  }

  .pen-hero-search-icon {
    padding-inline: 0.75rem;
  }

  .pen-hero-search-submit {
    width: 100%;
    padding-block: 0.78rem;
  }

  .pen-btn {
    justify-content: center;
    min-width: 140px;
  }

  .pen-verse-day-header {
    gap: 0.75rem;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .pen-hero {
    min-height: 500px;
  }

  body.pen-template-home .pen-container {
    margin-top: -22px;
  }

  .pen-home-box {
    padding: 1.1rem;
    border-radius: 14px;
  }

  .pen-hero-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pen-alpha-btn {
    width: 34px;
    height: 34px;
  }
}