@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

:root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --teal: #00897b;
}
body {
    font-family: var(--bs-font-sans-serif), serif;
}
h1, h2, h3, .display-1, .display-2 {
    font-weight: 700;        /* Inter Bold */
    /* lub gdy chcesz Poppins tylko w nagłówkach */
    font-family: 'Poppins', var(--bs-font-sans-serif), serif;
}
.bg-taupe   { background-color:#ede8e0; }
.hero-wrap  { background: linear-gradient(#d8cebe 0%, #cdbcab 100%); }
.hero-wrap .card:hover{ transform:none; }
.btn-teal{ background:#17c964; color:#fff; }
.btn-teal:hover{ background:#11a14e; color:#fff; }
/* pomocnicza klasa, by obraz nie zniekształcał się przy zmianie rozmiaru */
.object-fit-cover { object-fit:cover; }
.blu-logo { height: 80px; }
/* 1) RESPONSYWNE ROZMIARY TEKSTU */
.hero-title{
    color:#fff;
    font-weight:700;
    /* 1.75rem (~28 px) na bardzo małych, rośnie do 2.8rem (~45 px) */
    font-size:clamp(1.75rem,6.5vw,2.8rem);
    line-height:1.1;
    margin-bottom:.5rem;
}

.hero-sub{
    color:rgba(255,255,255,.8);
    font-size:clamp(1rem,3.8vw,1.25rem);
    line-height:1.35;
}

/* 2) HERO MA ELASTYCZNĄ WYSOKOŚĆ */
.hero-img{
    width:100%;
    object-fit:cover;
    min-height:60vh;          /* 60% wysokości okna na XS */
}

.hero-overlay{
    position:absolute;
    left:5px;               /* kotwica: lewy-dół */
    bottom:5px;
    z-index:2;
    max-width:600px;      /* żeby tekst nie zajmował ½ zdjęcia */
    width:100%;
    padding:1.25rem 1.5rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;

    /* półprzezroczyste tło                                       */
    /*  ↳ używamy hsla – łatwiej sterować kryciem                */
    background:hsla(0,0%,0%,.35);      /* czarny, 45 % krycia  */
    backdrop-filter:blur(2px);         /* subtelne rozmycie za tekstem (Safari/Chrome) */
    border-radius:12px;      /* miękkie rogi jak w karcie */
}

/* tytuł + lead mniejsze odstępy (bo mamy mniej wysokości) */
.hero-overlay .hero-title{
    font-size:clamp(1.6rem,5.2vw,2.5rem);
    margin:0;
    line-height:1.15;
    color:#fff;
}
.hero-overlay .hero-sub{
    font-size:clamp(.95rem,3.2vw,1.15rem);
    margin:0;
    color:#f8f9fa;
}

/* ——— Karty wpisów ——— */
.card-img-top{ border-bottom:2px solid rgba(0,0,0,.08); }
.card:hover{ transform:translateY(-4px); transition:.25s; }

/* ——— Przyciski w kartach ——— */
.btn-outline-teal{
    --bs-btn-color:#008078;
    --bs-btn-border-color:#008078;
    --bs-btn-hover-bg:#008078;
    --bs-btn-hover-border-color:#007168;
    --bs-btn-hover-color:#fff;
}

/* ——— Pasek kategorii ——— */
.nav-pills .nav-link{
    border-radius:2rem;
    color:#222;
}
.nav-pills .nav-link.active{
    background:#008078;
    color:#fff;
}

/* ——— Ikony w stopce ——— */
.footer-link{
    font-size: .875rem;         /* 14 px */
    color: #6c757d;             /* $gray-600 */
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
    &:hover{ color:#008078; text-decoration:underline; }
}

/* separator „|” między linkami (pokazuj tylko gdy jest obok linku) */
.sep{
    color:#c0c0c0;
    user-select:none;
}

/* ——— ikony (już były, ale dorzuć dla pewności) ——— */
.footer-icon{
    font-size:1.55rem;
    color:#222;
    transition:color .2s;
    &:hover{ color:#008078; }
}
.copyright {
    font-size: .75rem;        /* 12 px */
    line-height: 1.4;
}


@media (min-width:576px){
    .hero-img{ min-height:50vh; }
}
@media (min-width:768px){
    .hero-img{ min-height:45vh; }
}
/* 1️⃣  Więcej miejsca na obraz + overlay przy niskim viewport-height */
@media (max-height: 450px){
    /* dotyczy i SE, i starszych Androidów w poziomie */
    .hero-img{ min-height: 260px; }          /* stałe ≥ 260 px zamiast % */
}

/* 2️⃣  Dodatkowa korekta tylko w poziomie */
@media (orientation: landscape) and (max-height: 450px){
    /* tytuł i lead skalują się mocniej w dół */
    .hero-title{ font-size:clamp(1.2rem,4.5vw,2.0rem);line-height:1.05; }
    .hero-sub  { font-size:clamp(.9rem ,3.5vw,1.1rem); }
}