/* =============================================
   PAGE-SPECIFIC STYLES — KochajSię.pl
   ============================================= */

/* ════════════════════════════════════════════
   STRONA GŁÓWNA (index.html)
   ════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────── */
@keyframes floatGently {
     0% {
          transform: translateY(-12px) translateX(0);
     }

     100% {
          transform: translateY(12px) translateX(-5px);
     }
}

/* Hero background color float */
@keyframes heroBgFloat {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

.hero-animated-bg {
     background: linear-gradient(135deg,
               #FDF0F2 0%,
               #F9DDE4 20%,
               #FDF0F2 40%,
               #F5EDE6 60%,
               #FEF9F6 80%,
               #FDF0F2 100%);
     background-size: 300% 300%;
     animation: heroBgFloat 12s ease infinite;
}

.hero-kicker {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 26px;
}

.hero-kicker-line {
     width: 32px;
     height: 2px;
     background: var(--r4);
}

/* ─── CATEGORIES GRID 2×2 ────────────────────── */
.cat-section {
     padding: 80px 0;
}

.cat-intro {
     text-align: center;
     margin-bottom: 48px;
}

.cat-grid-2x2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     max-width: 1180px;
     margin: 0 auto;
     padding-bottom: 48px;
}

.cat-grid-2x2>.cat-tile:nth-child(even) {
     transform: translateY(48px);
}

.cat-tile {
     position: relative;
     overflow: hidden;
     height: 290px;
     border-radius: 24px;
     cursor: pointer;
     display: flex;
     align-items: flex-end;
     box-shadow: 0 16px 48px rgba(107, 17, 39, 0.08);
     text-decoration: none;
     transition: box-shadow .35s ease;
}

.cat-tile:hover {
     box-shadow: 0 24px 64px rgba(107, 17, 39, 0.16);
}

.cat-tile-bg {
     position: absolute;
     inset: 0;
     transition: transform .5s ease;
}

.cat-lineart {
     position: absolute;
     right: -32px;
     top: -10%;
     bottom: -10%;
     height: 120%;
     width: 65%;
     background-size: contain;
     background-position: right center;
     background-repeat: no-repeat;
     opacity: 0.85;
     z-index: 1;
     transition: transform 0.5s ease;
}

.cat-tile:hover .cat-tile-bg {
     transform: scale(1.05);
}

.cat-tile:hover .cat-lineart {
     transform: scale(1.05) translateY(-5px);
}

/* old arrow removed — replaced with inline pill CTA */

.cat-tile-1 .cat-tile-bg {
     background: radial-gradient(ellipse at 40% 30%, #fff0f3, #fdf0f2);
}

.cat-tile-2 .cat-tile-bg {
     background: radial-gradient(ellipse at 65% 35%, #fae4e8, #f8dce2);
}

.cat-tile-3 .cat-tile-bg {
     background: radial-gradient(ellipse at 35% 55%, #fcedef, #f2d8dd);
}

.cat-tile-4 .cat-tile-bg {
     background: radial-gradient(ellipse at 55% 35%, #fff1f4, #f4dbe0);
}

.cat-tile-shade {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .2) 65%, transparent 100%);
     z-index: 1;
}

.cat-tile-body {
     position: relative;
     z-index: 2;
     padding: 32px 40px 36px;
     width: 100%;
}

/* CTA — subtelny napis bez obwiedni */
.cat-tile-cta {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin-top: 14px;
     font-family: var(--sans);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--r5);
     background: none;
     border: none;
     padding: 0;
     opacity: 0;
     transform: translateY(5px);
     transition: opacity .3s ease, transform .3s ease;
}

.cat-tile-cta svg {
     width: 11px;
     height: 11px;
     transition: transform .25s ease;
}

.cat-tile:hover .cat-tile-cta {
     opacity: 1;
     transform: translateY(0);
}

.cat-tile:hover .cat-tile-cta svg {
     transform: translateX(4px);
}

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

.cat-tile-name {
     font-family: var(--serif);
     font-size: 32px;
     font-weight: 700;
     line-height: 1.12;
     color: var(--ink);
     letter-spacing: -.01em;
}

.cat-tile-name em {
     font-style: italic;
}

.cat-tile-desc {
     font-size: 14px;
     color: var(--ink2);
     line-height: 1.5;
     margin-top: 8px;
     display: none;
}

.cat-tile-count {
     font-family: var(--sans);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: .08em;
     color: var(--ink3);
     text-transform: uppercase;
     margin-top: 6px;
     opacity: .7;
}

/* ─── ARTICLES GRID ──────────────────────────── */
.arts-grid-4 {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr;
     grid-template-rows: auto auto;
     gap: 24px;
     align-items: start;
}

.art-feat {
     grid-column: 1;
     grid-row: 1 / -1;
     display: flex;
     flex-direction: column;
}

.art-stack1 {
     grid-column: 2;
     grid-row: 1;
     display: flex;
     flex-direction: column;
}

.art-stack2 {
     grid-column: 2;
     grid-row: 2;
     display: flex;
     flex-direction: column;
}

.art-tall {
     grid-column: 3;
     grid-row: 1 / -1;
     display: flex;
     flex-direction: column;
}

/* ─── MANIFESTO ──────────────────────────────── */
.manifesto-section {
     padding: 96px 0;
}

.manifesto-q {
     font-family: var(--serif);
     font-size: clamp(22px, 2.4vw, 36px);
     font-style: italic;
     font-weight: 800;
     line-height: 1.55;
     color: var(--ink);
     margin: 20px 0;
     letter-spacing: -.012em;
}

/* ─── FAQ ─────────────────────────────────────── */
.faq-grid {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 64px;
     align-items: start;
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 36px;
}

.faq-item {
     border-bottom: 1px solid rgba(212, 86, 106, .12);
}

.faq-item:first-child {
     border-top: 1px solid rgba(212, 86, 106, .12);
}

.faq-q {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 22px 0;
     cursor: pointer;
     background: none;
     border: none;
     width: 100%;
     text-align: left;
     font-family: var(--serif);
     font-size: 19px;
     font-weight: 700;
     color: var(--ink);
     line-height: 1.35;
     letter-spacing: -.01em;
     transition: color .2s;
}

.faq-q:hover {
     color: var(--r5);
}

.faq-chevron {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     color: var(--r4);
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.open .faq-chevron {
     transform: rotate(180deg);
}

.faq-a-wrap {
     max-height: 0;
     overflow: hidden;
     transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
     opacity: 0;
}

.faq-item.open .faq-a-wrap {
     opacity: 1;
}

.faq-a {
     padding: 0 0 24px;
     font-family: var(--sans);
     font-size: 16px;
     font-weight: 300;
     line-height: 1.82;
     color: var(--ink2);
     max-width: 540px;
}

/* ════════════════════════════════════════════
   KATEGORIA (kategoria.html)
   ════════════════════════════════════════════ */
.cluster-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-top: 48px;
}

.cluster-card {
     background: rgba(255, 255, 255, .88);
     border: 1px solid rgba(212, 86, 106, .12);
     border-radius: 16px;
     padding: 24px;
     text-decoration: none;
     transition: transform .3s, box-shadow .3s;
}

.cluster-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 36px rgba(158, 32, 56, .08);
}

.cluster-card-title {
     font-family: var(--serif);
     font-size: 17px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--ink);
     margin-bottom: 8px;
}

.filter-bar {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 40px;
}

.fbtn {
     background: none;
     border: 1.5px solid rgba(212, 86, 106, .25);
     border-radius: 100px;
     font-family: var(--sans);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .07em;
     text-transform: uppercase;
     color: var(--ink3);
     padding: 8px 18px;
     cursor: pointer;
     transition: all .2s;
}

.fbtn.on,
.fbtn:hover {
     background: var(--r5);
     border-color: var(--r5);
     color: #fff;
}

/* ════════════════════════════════════════════
   BLOG (blog.html)
   ════════════════════════════════════════════ */
.blog-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 28px;
}

.blog-feat {
     grid-column: 1 / -1;
}

.blog-feat .card-img {
     height: 400px;
}

/* ════════════════════════════════════════════
   POST (post.html)
   ════════════════════════════════════════════ */
.post-layout {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 64px;
     align-items: start;
     padding-top: 48px;
     padding-bottom: 80px;
}

.post-body {
     font-size: 17px;
     font-weight: 300;
     line-height: 1.85;
     color: var(--ink2);
}

.post-body h2 {
     font-family: var(--serif);
     font-size: clamp(24px, 2.5vw, 36px);
     font-weight: 700;
     line-height: 1.18;
     color: var(--ink);
     margin: 48px 0 20px;
}

.post-body h3 {
     font-family: var(--serif);
     font-size: clamp(20px, 2vw, 28px);
     font-weight: 700;
     line-height: 1.22;
     color: var(--ink);
     margin: 36px 0 16px;
}

.post-body p {
     margin-bottom: 22px;
}

.post-body ul {
     padding-left: 22px;
     margin-bottom: 22px;
}

.post-body li {
     margin-bottom: 8px;
}

.post-body blockquote {
     border-left: 3px solid var(--r4);
     padding: 8px 0 8px 24px;
     margin: 32px 0;
     font-family: var(--serif);
     font-style: italic;
     font-size: 20px;
     color: var(--ink);
     line-height: 1.55;
}

.post-hero-img {
     width: 100%;
     border-radius: 24px;
     margin-bottom: 40px;
     aspect-ratio: 16 / 7;
     object-fit: cover;
}

.post-sidebar {
     position: sticky;
     top: 90px;
}

/* ════════════════════════════════════════════
   O NAS (o-nas.html)
   ════════════════════════════════════════════ */
.team-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 40px;
     max-width: 1040px;
     margin: 0 auto;
}

.team-member {
     text-align: center;
}

.team-avatar {
     width: 220px;
     height: 220px;
     margin: 0 auto 24px;
     border-radius: 50%;
     overflow: hidden;
     transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}

.team-avatar:hover {
     transform: scale(1.04);
     box-shadow: 0 16px 48px rgba(184, 51, 74, .16), 0 0 0 6px rgba(249, 221, 228, .7);
}

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

/* ════════════════════════════════════════════
   BIO AUTORA (bio.html)
   ════════════════════════════════════════════ */
.bio-hero {
     display: grid;
     grid-template-columns: 320px 1fr;
     gap: 64px;
     align-items: start;
     padding: 64px 0;
}

.bio-avatar-wrap {
     position: sticky;
     top: 90px;
}

.bio-avatar {
     width: 100%;
     aspect-ratio: 3 / 4;
     border-radius: 24px;
     overflow: hidden;
}

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