/* =========================================================
   Guide — single & archive
   ========================================================= */

/* Archive */
.archive-guide__header {
    padding: var(--size-2xl) 0 var(--size-xl);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--size-xl);
}

.archive-guide__title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
}

.archive-guide__desc {
    font-size:   1rem;
    color:       var(--color-muted);
    margin-top:  var(--size-sm);
    max-width:   640px;
}

/* Single guide */
.single-guide {
    padding: var(--size-2xl) 0 var(--size-3xl);
}

.single-guide__breadcrumb {
    font-size:     0.8rem;
    color:         var(--color-muted);
    margin-bottom: var(--size-xl);
}

.single-guide__breadcrumb a {
    color:           var(--color-muted);
    text-decoration: none;
}

.single-guide__breadcrumb a:hover {
    text-decoration: underline;
}

.single-guide__header {
    margin-bottom: var(--size-2xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--size-xl);
}

.single-guide__title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
    line-height:    1.2;
}

.single-guide__meta {
    margin-top: var(--size-md);
    font-size:  0.85rem;
    color:      var(--color-muted);
}

/* Guide meta: layer + intent */
.sleepops-guide__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--size-sm, 0.5rem);
    margin:    var(--size-sm, 0.5rem) 0;
}

.sleepops-guide__meta-item {
    display:          inline-block;
    font-size:        0.8rem;
    color:            var(--color-muted);
    background:       var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius, 4px);
    padding:          0.2rem 0.6rem;
}

/* TLDR box */
.guide-tldr {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-left:   3px solid var(--color-primary);
    border-radius: var(--radius);
    padding:       var(--size-lg);
    margin-bottom: var(--size-2xl);
}

.guide-tldr__label {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-primary);
    margin-bottom:  var(--size-sm);
}

.guide-tldr__text {
    font-size:   0.95rem;
    color:       var(--color-text);
    line-height: 1.6;
}

/* Related setups section */
.guide-related-setups,
.guide-recommended-devices {
    margin-top: var(--size-2xl);
    padding-top: var(--size-xl);
    border-top: 1px solid var(--color-border);
}

.guide-related-setups__title,
.guide-recommended-devices__title {
    font-size:     1.1rem;
    font-weight:   600;
    color:         var(--color-primary);
    margin-bottom: var(--size-md);
}

/* =========================================================
   Archive Guide — full-page sections
   ========================================================= */

/* -- page wrapper -- */
.page-guide {
    padding-bottom: 80px;
}

/* -- Section 1: Situations -- */
.guide-situations {
    background:  #fff;
    padding:     64px 0 56px;
    border-bottom: 1px solid var(--color-border);
}

.guide-situations__title {
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.03em;
    margin-bottom:  8px;
}

.guide-situations__desc {
    font-size:     1rem;
    color:         var(--color-muted);
    margin-bottom: 40px;
}

.situation-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
}

.situation-card {
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    padding:         24px;
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    text-decoration: none;
    transition:      border-color 0.15s, box-shadow 0.15s;
}

.situation-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 2px 8px rgba(0,0,0,.06);
}

.situation-card__name {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-primary);
}

.situation-card__count {
    font-size: 0.85rem;
    color:     var(--color-muted);
}

/* -- Section 2: Popular -- */
.guide-popular {
    background: #F7F9FA;
    padding:    56px 0;
    border-bottom: 1px solid var(--color-border);
}

.guide-popular__title {
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.02em;
    margin-bottom:  32px;
}

.guide-popular__list {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.guide-popular__item {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding:          18px 20px;
    background:       #fff;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    text-decoration:  none;
    transition:       border-color 0.15s;
}

.guide-popular__item:hover {
    border-color: var(--color-primary);
}

.guide-popular__item-title {
    font-size:   0.95rem;
    font-weight: 500;
    color:       var(--color-primary);
}

.guide-popular__item-arrow {
    color:     var(--color-muted);
    font-size: 0.9rem;
}

/* -- Section 3: All Guides -- */
.guide-all {
    background: #fff;
    padding:    56px 0;
}

.guide-all__title {
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--color-primary);
    letter-spacing: -0.02em;
    margin-bottom:  24px;
}

.guide-all__empty {
    color: var(--color-muted);
}

/* Filter buttons */
.guide-filter {
    display:       flex;
    gap:           8px;
    margin-bottom: 32px;
    flex-wrap:     wrap;
}

.guide-filter__btn {
    padding:       8px 20px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 100px;
    font-size:     0.85rem;
    color:         var(--color-muted);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
}

.guide-filter__btn:hover,
.guide-filter__btn.is-active {
    background:   var(--color-primary);
    color:        #fff;
    border-color: var(--color-primary);
}

/* Guide list rows (enhanced for archive) */
#guide-list .card-guide-row {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         20px;
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    margin-bottom:   8px;
    text-decoration: none;
    transition:      border-color 0.15s;
}

#guide-list .card-guide-row:hover {
    border-color: var(--color-primary);
}

#guide-list .card-guide-row__body {
    flex: 1;
}

#guide-list .card-guide-row__title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-primary);
    margin:      0 0 4px;
}

#guide-list .card-guide-row__excerpt {
    font-size: 0.85rem;
    color:     var(--color-muted);
    margin:    0;
}

#guide-list .card-guide-row__tag {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-muted);
    white-space:    nowrap;
}

#guide-list .card-guide-row__arrow {
    color:      var(--color-muted);
    flex-shrink: 0;
}