/* =====================================================================
   Teli-Nyari – szezoncsucs-terkep: "mikor van hely?" (shop/_tn_terkep, App\Services\TnTerkep, docs/102)
   Elotag: tnk-. A szinek: zold = bőven van hely, sarga = fogy, piros = szinte telt, szurke = zarva.
   ===================================================================== */

.tnk { padding: 56px 0 8px }
.tnk-kicsi { padding: 0 }
.tnk-doboz { position: relative; border-radius: 28px; background: var(--lap, #fff); border: 1px solid var(--vonal, #E4E8F2); box-shadow: var(--arny-e); padding: 28px 30px 22px }
.tnk-kicsi .tnk-doboz { border-radius: 22px; padding: 22px 22px 16px; box-shadow: var(--arny) }
.tnk-fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 20px }
.tnk-fej h2 { margin: 8px 0 6px }
.tnk-kicsi .tnk-fej h2 { font-size: 22px }
.tnk-mondat { margin: 0; max-width: 62ch; color: var(--tinta-2, #4A5470); font-size: 15.5px }
.tnk-jelmagyarazat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2, #4A5470) }
.tnk-jelmagyarazat li { display: inline-flex; align-items: center; gap: 7px }
.tnk-p { width: 12px; height: 12px; border-radius: 4px; display: inline-block; background: var(--tnk-bg); box-shadow: inset 0 0 0 1.5px var(--tnk-szel) }

/* allapot-szinek (a nap es a jelmagyarazat kozos valtozoi) */
.tnk .zold { --tnk-bg: #E3F6EC; --tnk-szel: #19A866; --tnk-szam: #0B7A47 }
.tnk .sarga { --tnk-bg: #FFF4D6; --tnk-szel: #E9A916; --tnk-szam: #94660A }
.tnk .piros { --tnk-bg: #FDE6E3; --tnk-szel: #E0443A; --tnk-szam: #B42318 }
.tnk .zarva { --tnk-bg: #F1F3F7; --tnk-szel: #D3D8E3; --tnk-szam: #5F6882 }
.tnk .nincs { --tnk-bg: #F7F8FB; --tnk-szel: #E4E8F2; --tnk-szam: #5F6882 }
.tnk .mult { --tnk-bg: transparent; --tnk-szel: transparent; --tnk-szam: #6B7591 }

.tnk-racs { display: grid; gap: 6px }
.tnk-cella { display: contents } /* a link a racs eleme marad; a cella-szerep a burkolon (a-n nem engedett) */
.tnk-sor { display: grid; grid-template-columns: 118px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: stretch }
.tnk-napfej span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3, #5F6882); text-align: center; padding: 2px 0 4px }
.tnk-napfej .hetvege { color: var(--tinta-2, #4A5470) }
.tnk-hetcim { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--tinta-2, #4A5470); white-space: nowrap }
.tnk-rejt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.tnk-nap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; border-radius: 14px;
  background: var(--tnk-bg); box-shadow: inset 0 0 0 1.5px var(--tnk-szel); color: var(--tinta, #0B1224); text-decoration: none;
  transition: transform .3s var(--rugo, ease), box-shadow .25s }
.tnk-nap b { font: 700 17px/1.1 var(--disp, system-ui, sans-serif) }
.tnk-nap small { font-size: 11.5px; font-weight: 700; color: var(--tnk-szam) }
a.tnk-nap:hover, a.tnk-nap:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--tnk-szel), 0 10px 20px -12px rgba(22, 35, 61, .45) }
.tnk-nap.mult b { color: #6B7591; font-weight: 600 }
.tnk-nap.zarva b, .tnk-nap.nincs b { color: #5F6882 }
.tnk-nap.ma { box-shadow: inset 0 0 0 1.5px var(--tnk-szel), 0 0 0 2px var(--lap, #fff), 0 0 0 4px var(--ej-2, #16233D) }
.tnk-nap.ma::after { content: "ma"; position: absolute; top: 4px; right: 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ej-2, #16233D) }
.tnk-megj { margin: 14px 0 0; font-size: 12.5px; color: var(--tinta-3, #5F6882) }

/* lepcsos beuszas (csak JS-sel, mozgas engedve, nem konnyitett modban: tn-terkep.js teszi a .tnk-el osztalyt) */
.tnk-el .tnk-nap { opacity: 0; transform: translateY(8px) scale(.96) }
.tnk-el.tnk-be .tnk-nap { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s var(--rugo, ease); transition-delay: calc(var(--i, 0) * 14ms) }

@media (max-width: 760px) {
  .tnk { padding-top: 40px }
  .tnk-doboz { padding: 20px 14px 16px; border-radius: 22px }
  .tnk-sor { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
  .tnk-hetcim { grid-column: 1 / -1; font-size: 11.5px; margin-top: 4px }
  .tnk-napfej .tnk-hetcim { display: none }
  .tnk-nap { min-height: 48px; border-radius: 11px }
  .tnk-nap b { font-size: 15px }
  .tnk-nap small { font-size: 10.5px }
  .tnk-nap.ma::after { display: none }
  .tnk-mondat { font-size: 14.5px }
}
@media (prefers-reduced-motion: reduce) {
  .tnk-nap, a.tnk-nap:hover { transition: none; transform: none }
}