/* Kontakt — Practical info cards (Kako do nas / Radno vrijeme / Jezici).
   Compact, static, hospital-calm. Section fits in one laptop viewport. */

.practical-info{
  background:var(--paper);
  padding:64px 0 72px;
  position:relative;overflow:hidden;
}
/* Soft decorative orb (static, no animation). */
.practical-info::before{
  content:"";position:absolute;top:-140px;right:-160px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,var(--mint-50),transparent 70%);
  opacity:.5;pointer-events:none;z-index:0;
}

.practical-info .sec-head{position:relative;z-index:1;margin-bottom:40px}
.practical-info .sec-head h2{
  font-size:clamp(1.7rem,3vw,2.3rem);
  margin:14px 0 0;
}

/* --- Card grid ---------------------------------------------- */
.info-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  position:relative;z-index:1;
}

/* Cards are static. Only the border-color changes on hover for affordance. */
.info-card{
  position:relative;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px 28px;
  display:flex;flex-direction:column;
  transition:border-color .2s ease;
}
.info-card:hover{border-color:var(--mint)}

/* Icon tile (top-left) — static. */
.info-card .ic{
  width:50px;height:50px;border-radius:13px;
  background:var(--mint-50);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.info-card .ic svg{width:24px;height:24px}

/* Card number (top-right, Fraunces, muted). */
.info-card .card-num{
  position:absolute;top:24px;right:26px;
  font-family:"Fraunces",serif;font-size:1rem;font-weight:400;
  color:var(--sage);opacity:.55;letter-spacing:.04em;
}

.info-card h4{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:1.2rem;font-weight:700;color:var(--pine);
  margin-bottom:16px;line-height:1.3;
}

/* "Otvoreno" pill in the Radno vrijeme heading. */
.hours-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px 3px 8px;border-radius:100px;
  background:rgba(60,169,119,.16);color:#2c8157;
  margin-left:8px;vertical-align:middle;line-height:1;
}
.hours-status .dot{width:6px;height:6px;border-radius:50%;background:#3ca977}

/* --- Card 01 — Travel list ---------------------------------- */
.travel-list{list-style:none;display:grid;gap:12px;margin:0}
.travel-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding-bottom:12px;border-bottom:1px dashed var(--line);
}
.travel-list li:last-child{border:none;padding-bottom:0}
.travel-list .ti{
  width:36px;height:36px;border-radius:10px;
  background:var(--mint-50);color:var(--teal);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;
}
.travel-list b{display:block;color:var(--pine);font-size:1rem;font-weight:700;margin-bottom:2px}
.travel-list span{display:block;color:var(--muted);font-size:.92rem;line-height:1.5}

/* --- Card 02 — Hours list ----------------------------------- */
.hours-list{list-style:none;display:grid;gap:0;margin:0}
.hours-list .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px dashed var(--line);
  color:var(--ink-soft);font-size:1rem;
}
.hours-list .row:last-child{border-bottom:none}
.hours-list .row b{color:var(--pine);font-weight:600}
.hours-list .row span{color:var(--muted);font-feature-settings:"tnum" 1}

/* Today highlight — gradient bg + left teal bar + teal text. Static. */
.hours-list .row.today{
  position:relative;
  background:linear-gradient(90deg,var(--mint-50),rgba(207,226,221,.25));
  border:1px solid var(--mint);
  border-radius:10px;
  margin:2px -12px;padding:10px 14px 10px 18px;
  font-weight:600;
}
.hours-list .row.today + .row{border-top:1px dashed var(--line);margin-top:2px}
.hours-list .row.today::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--teal);border-radius:0 3px 3px 0;
}
.hours-list .row.today b{color:var(--teal)}
.hours-list .row.today span{color:var(--teal-600);font-weight:600}

/* --- Card 02 — pre-opening flip variant ----------------------
   The article becomes a transparent perspective wrapper; both faces
   stack in the same grid cell and carry the card chrome themselves,
   so the card keeps the height of its taller face. kontakt.js toggles
   .is-flipped on .hours-flip. */
.info-card--flip{
  display:block;
  background:transparent;
  border:none;
  padding:0;
  perspective:1400px;
}
.hours-flip{
  display:grid;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,.1,.15,1);
}
.hours-flip.is-flipped{transform:rotateY(180deg)}
.hours-face{
  grid-area:1/1;
  position:relative;
  display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 28px 28px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:border-color .2s ease;
}
.hours-face:hover{border-color:var(--mint)}
.hours-face--back{transform:rotateY(180deg)}
.hours-face--back .hours-list{margin-bottom:18px}

/* Amber "uskoro" pill — mirrors .status-card.closed colours. */
.hours-status--soon{
  background:rgba(200,118,30,.14);
  color:#9a5f14;
}
.hours-status--soon .dot{background:#c8761e}

.hours-soon-title{
  font-family:"Fraunces",serif;
  font-size:1.5rem;font-weight:400;
  color:var(--pine);
  line-height:1.2;letter-spacing:-.01em;
  margin:2px 0 10px;
}
.hours-soon-title em{color:var(--teal);font-style:italic}
.hours-soon-text{
  color:var(--muted);
  font-size:.95rem;line-height:1.6;
  margin:0 0 18px;
}

.hours-flip-btn{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--mint);
  background:var(--mint-50);
  color:var(--teal);
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.9rem;font-weight:700;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.hours-flip-btn:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
.hours-flip-btn svg{width:15px;height:15px;flex:none}

@media (prefers-reduced-motion: reduce){
  .hours-flip{transition:none}
}

/* --- Card 03 — Jezici --------------------------------------- */
.lang-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lang-chip{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:100px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--mint-50);color:var(--teal);
  border:1px solid var(--mint);
}

.info-card--lang>p{
  color:var(--muted);font-size:.98rem;line-height:1.55;
  margin-bottom:14px;
}

.lang-callout{
  margin-top:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:13px 16px 13px 18px;
  border-left:3px solid var(--teal);
}
.lang-callout b{display:block;color:var(--pine);font-weight:700;font-size:.96rem;margin-bottom:3px;font-family:"Hanken Grotesk",sans-serif}
.lang-callout span{display:block;color:var(--muted);font-size:.86rem;line-height:1.5}

/* --- Responsive --------------------------------------------- */
@media(max-width:980px){
  .practical-info{padding:56px 0 64px}
  .practical-info .sec-head{margin-bottom:32px}
  .info-grid{grid-template-columns:1fr;gap:16px}
  .practical-info::before{width:280px;height:280px;top:-100px;right:-100px}
}
@media(max-width:680px){
  .info-card{padding:22px 20px 20px}
  .info-card .card-num{top:18px;right:20px}
  .info-card--flip{padding:0}
  .hours-face{padding:22px 20px 20px}
}