/* =============================================
   COMPONENTS — KochajSię.pl
   ============================================= */

/* ─── BUTTONS ────────────────────────────────── */
.btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: var(--sans);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     text-decoration: none;
     border: none;
     border-radius: var(--r-pill);
     cursor: pointer;
     padding: 14px 30px;
     transition: all .25s;
}

.btn-p {
     background: var(--r5);
     color: #fff;
}

.btn-p:hover {
     background: var(--r6);
     transform: translateY(-1px);
}

.btn-o {
     background: transparent;
     color: var(--r5);
     border: 2px solid var(--r5);
}

.btn-o:hover {
     background: var(--r5);
     color: #fff;
}

.btn-g {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--r5);
     font-family: var(--sans);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     text-decoration: none;
     border-bottom: 2px solid currentColor;
     padding-bottom: 2px;
     transition: color .2s;
}

.btn-g:hover {
     color: var(--r6);
}

/* ─── CARDS ──────────────────────────────────── */
.card {
     background: #fff;
     border: 1px solid rgba(212, 86, 106, .1);
     border-radius: var(--r-card);
     overflow: hidden;
     transition: transform .3s, box-shadow .3s;
}

.card:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-card);
}

.card-img {
     width: 100%;
     height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
}

.card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.card-body {
     padding: 24px 26px 28px;
}

.card-cat {
     font-family: var(--sans);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .13em;
     text-transform: uppercase;
     color: var(--r4);
     margin-bottom: 10px;
}

.card-title {
     font-family: var(--serif);
     font-size: 21px;
     font-weight: 700;
     line-height: 1.22;
     color: var(--ink);
     margin-bottom: 10px;
     letter-spacing: -.01em;
}

.card-meta {
     font-size: 12px;
     color: var(--ink3);
     display: flex;
     gap: 10px;
     margin-top: 14px;
}

/* ─── TAGS ───────────────────────────────────── */
.tag {
     display: inline-block;
     font-family: var(--sans);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--r5);
     background: rgba(212, 86, 106, .1);
     border-radius: 4px;
     padding: 5px 12px;
     margin: 3px;
}

/* ─── BREADCRUMB ─────────────────────────────── */
.bc {
     display: flex;
     gap: 8px;
     align-items: center;
     font-size: 12px;
     color: var(--ink3);
     margin-bottom: 24px;
     flex-wrap: wrap;
}

.bc a {
     color: var(--r4);
     text-decoration: none;
     font-weight: 500;
}

.bc-sep {
     color: rgba(0, 0, 0, .25);
}

/* ─── SIDEBAR ────────────────────────────────── */
.sidebar-w {
     background: #fff;
     border: 1px solid rgba(212, 86, 106, .1);
     padding: 26px 28px;
     margin-bottom: 24px;
}

.sidebar-title {
     font-family: var(--serif);
     font-size: 22px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 16px;
     padding-bottom: 12px;
     border-bottom: 1px solid rgba(212, 86, 106, .1);
}

.sidebar-cats {
     list-style: none;
}

.sidebar-cats li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 9px 0;
     border-bottom: 1px solid rgba(212, 86, 106, .06);
}

.sidebar-cats a {
     font-size: 14px;
     color: var(--ink2);
     text-decoration: none;
     font-weight: 500;
}

.sidebar-cats a:hover {
     color: var(--r5);
}

.sidebar-cats span {
     font-size: 11px;
     color: var(--r4);
     font-weight: 700;
}

.author-av {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: var(--r2);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--serif);
     font-size: 20px;
     font-style: italic;
     color: var(--r4);
}

/* ─── EXT LINK ───────────────────────────────── */
.ext-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     text-decoration: none;
     color: var(--r5);
     border: 1.5px solid rgba(212, 86, 106, .3);
     padding: 7px 14px;
     border-radius: 40px;
     transition: border-color .2s, color .2s;
}

.ext-link:hover {
     border-color: var(--r4);
     color: var(--r5);
}