/* ----------------------------------------------------------------------------
/* Hero
/* --------------------------------------------------------------------------*/
@media(max-width: 1023px) {
  .nook-home-hero {
      padding-top: 4rem;
      padding-bottom: 4rem;
  }
}
@media(min-width: 1024px) {
  .nook-hero {
      min-height: 90vh;
  }
}
.nook-hero { 
  position: relative;
  align-items: center;
}
.nook-hero picture { 
  background: 
      radial-gradient(circle at 15% 25%, rgba(212, 0, 93, 0.35), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(0, 255, 255, 0.25), transparent 45%),
      linear-gradient(to bottom, rgba(13, 2, 33, 0.5) 0%, rgba(13, 2, 33, 0.3) 40%, rgba(13, 2, 33, 0.95) 100%);
  filter: contrast(1.15) saturate(1.2);
}
 .nook-hero-title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 
              0 0 10px rgba(0, 255, 255, 0.8),
              0 0 30px rgba(0, 150, 255, 0.4),
              0 15px 30px rgba(0, 0, 0, 0.6)
}

.nook-hero-desc {
  font-size: 18px;
  font-weight: 800;
  color: var(--nook-c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  margin-bottom: 40px;
}

/* ----------------------------------------------------------------------------
/* Search
/* --------------------------------------------------------------------------*/
.nook-search--main { 
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  display: grid; 
  grid-template-columns: 1fr 1fr 1.3fr auto; 
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}
.nook-search--main .choices__inner:focus-within {
  transform: translateY(-2px);
  border-color: var(--nook-c-secondary);
  box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1);
}
.nook-search--main input, 
.nook-search--main select { 
  font-weight: 600; 
}
.nook-search--main #search-submit {
  background: linear-gradient(45deg, var(--nook-c-primary), #ff0080);
  color: var(--nook-c-white);
  padding: 1rem 3.5rem;;
  font-size: var(--nook-fs-body);
  box-shadow: 0 8px 15px rgba(212, 0, 93, 0.3);
}
.nook-search--main #search-submit:hover { 
  transform: translateY(-2px); 
  filter: brightness(1.1); 
  box-shadow: 0 12px 25px rgba(212, 0, 93, 0.5); 
}

@media (max-width: 767px) {
    .nook-search--main { 
      grid-template-columns: 1fr; 
    }
}

/* ----------------------------------------------------------------------------
/* Blog recent
/* --------------------------------------------------------------------------*/
.nook-recent .view-link { 
  font-size: 11px; font-weight: 700; color: var(--nook-c-primary); 
  text-transform: uppercase; text-decoration: none; justify-content: flex-start;
}
.view-link::after { content: " →"; display: inline-block; transition: transform 0.3s; }

.category-matrix { padding: var(--nook-section-pad) 0; }

.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }

.recent-card {
  background: #fff; padding: var(--sp-8); border: 1px solid var(--nook-c-border-alt);
  border-radius: 8px 48px 8px 8px; 
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: all var(--nook-transition-footer-alt); text-decoration: none;
  transform: translateZ(0); backface-visibility: hidden;
}
.recent-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.04); transform: translateY(-8px);}

.recent-meta { display: flex; justify-content: space-between; align-items: center; }
.recent-meta time { font-size: var(--nook-fs-xsmall); color: var(--nook-c-meta); font-weight: 600; }
.category-tag { 
  font-size: var(--nook-fs-xxsmall); font-weight: 700; background: var(--nook-tag-alt); 
  padding: 2px 8px; border-radius: 4px; color: var(--nook-c-text); 
}
.recent-title { 
  font-size: var(--nook-fs-h4); line-height: var(--nook-lh-h4); 
  font-weight: 800; color: var(--color-title); margin: 0; 
}
.recent-excerpt { font-size: var(--nook-fs-text); color: var(--nook-c-text); margin: 0; opacity: 0.8; }

@media (max-width: 1023px) {
  .matrix-grid-4col { grid-template-columns: repeat(2, 1fr); }
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 573px) {
  .matrix-grid-4col, .recent-grid { grid-template-columns: 1fr; }
}