@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ================================================= */
/*               TUKE FAREBNÁ PALETA                 */
/* ================================================= */

:root{
  --tuke-blue:#1b3c78;
  --tuke-blue-dark:#0f234a;

  --tuke-orange:#FF9100;
  --tuke-orange-dark:#d97700;

  --tuke-gray-50:#fbfcfe;
  --tuke-gray-100:#f7f7f7;
  --tuke-gray-200:#e9ecef;
  --tuke-gray-900:#1e1e1e;

  --stroke: rgba(15, 23, 42, .10);
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --shadow2: 0 16px 40px rgba(0,0,0,.12);
  --radius: 16px;
}

/* ================================================= */
/*                   TYPOGRAFIA                      */
/* ================================================= */

body{
  font-family:"Poppins", sans-serif;
  font-weight:400;
  color:var(--tuke-gray-900);
}

p, li, span, a, label{
  font-family:"Poppins", sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:"Poppins", sans-serif;
  font-weight:900;
  color:var(--tuke-blue-dark);
  letter-spacing:-.02em;
  margin:0 0 10px 0;
}

.subtitle{
  margin: 2px 0 0 0;
  color: rgba(15,35,74,.72);
  font-weight:600;
}

.accent-orange{
  color: var(--tuke-orange-dark) !important;
  font-weight:800;
}

/* ================================================= */
/*                       HERO                        */
/* ================================================= */

.about-hero{
  width:100%;
  padding: 50px 0;
  display:flex;
  justify-content:center;
  background: var(--tuke-gray-100);
}

.hero-wrapper{
  max-width:1180px;
  width:100%;
  padding: 0 20px;
}

.hero-photo{
  width:100%;
  object-fit:cover;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
}

/* ================================================= */
/*                   GRID LAYOUT                     */
/* ================================================= */

.about-grid{
  max-width:1180px;
  margin: 70px auto 40px;
  padding: 0 20px;

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense;
  gap:24px;
}

/* ================================================= */
/*                       KARTY                       */
/* ================================================= */

.card{
  background:#fff;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow2);
  border-color: rgba(255,145,0,.22);
}

/* odstránený oranžový pásik naľavo: žiadne card::before */

.card.small{ grid-row: span 1; }
.card.medium{ grid-row: span 2; }
.card.large{ grid-row: span 3; }

/* ================================================= */
/*                 HLAVIČKA KARTY + IKONA            */
/* ================================================= */

.card-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 14px;
}

.card-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,145,0,.12);
  border: 1px solid rgba(255,145,0,.22);
  color: var(--tuke-orange);
  flex: 0 0 46px;
}

.card-ico i{
  font-size: 1.15rem;
}

.card-title{
  margin: 0;
}

/* ================================================= */
/*                     LISTY                         */
/* ================================================= */

.nice-list{
  list-style:none;
  padding-left:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nice-list li{
  position:relative;
  padding-left: 18px;
  line-height:1.6;
  color: rgba(15,35,74,.78);
  font-weight:500;
}

.nice-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62rem;
  width:.52rem;
  height:.52rem;
  border-radius:50%;
  background: var(--tuke-orange);
}

/* ================================================= */
/*                     METRIKY                       */
/* ================================================= */

.metrics{
  display:flex;
  align-items:center;
}

.metrics-row{
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  text-align:center;
}

.metric-num{
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--tuke-orange);
  line-height:1.05;
}

.metric-label{
  margin-top:6px;
  font-weight:600;
  color: rgba(15,35,74,.78);
}

/* ================================================= */
/*                     CITÁT                         */
/* ================================================= */

.quote{
  background: linear-gradient(180deg, #27364B 0%, #1f2a3c 100%);
  color:#fff;
  border-color: rgba(255,255,255,.10);
}

.quote .quote-mark{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,145,0,.14);
  border: 1px solid rgba(255,145,0,.28);
  color: var(--tuke-orange);
  margin-bottom: 12px;
}

.quote .quote-mark i{
  font-size: 1.25rem;
}

.quote .quote-text{
  color: rgba(255,255,255,.86);
  line-height:1.65;
  font-style: italic;
  font-weight:500;
}

/* ================================================= */
/*                CTA TLAČIDLÁ V KEMT KARTE           */
/* ================================================= */

.btn-row{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;

  border: 2px solid rgba(255,145,0,.55);
  color: var(--tuke-orange-dark);
  background: rgba(255,145,0,.08);

  font-weight: 800;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  width: fit-content;
}

.btn-link i{
  color: var(--tuke-orange);
}

.btn-link:hover{
  transform: translateY(-2px);
  background: var(--tuke-orange);
  border-color: var(--tuke-orange);
  color: #1f2a3c;
}

.btn-link:hover i{
  color: #1f2a3c;
}

/* ================================================= */
/*                   RESPONSIVE                      */
/* ================================================= */

@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
  }

  .card{
    grid-row:auto;
    transform:none !important;
  }

  .metrics-row{
    grid-template-columns: 1fr;
  }
}