/* estate-cards base: shared by all four sites. The site skin follows it. */
.ec-card { cursor: pointer; isolation: isolate; }
.ec-card:not(.ec-pos), .ec-quiet:not(.ec-pos) { position: relative; }
.ec-card .ec-primary { text-decoration: none; }
.ec-card .ec-primary::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ec-card .ec-raise { position: relative; z-index: 2; }
.ec-card .ec-primary:focus-visible { outline: none; }
.ec-card:has(.ec-primary:focus-visible) { outline: 3px solid var(--ec-focus, #0b6c9b); outline-offset: 3px; }
.ec-card:not(.ec-plain)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ec-arrow { display: inline-block; margin-left: .4em; opacity: 0; transform: translateX(-.4em); transition: opacity .25s ease, transform .25s ease; }
.ec-card:hover .ec-arrow, .ec-card:focus-within .ec-arrow { opacity: 1; transform: none; }
.ec-arrowhead::after { content: "92"; display: inline-block; margin-left: .4em; color: var(--ec-arrow, currentColor); opacity: 0; transform: translateX(-.4em); transition: opacity .25s ease, transform .25s ease; }
.ec-arrowhead--down::after { content: "93"; }
.ec-card:hover .ec-arrowhead::after, .ec-card:focus-within .ec-arrowhead::after, .ec-card:focus-visible .ec-arrowhead::after { opacity: 1; transform: none; }
.ec-tier-card:focus-visible { outline: 3px solid var(--ec-focus, #0b6c9b); outline-offset: 3px; }
@media (hover: none) { .ec-arrow, .ec-arrowhead::after { opacity: .7; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ec-card, .ec-card *, .ec-card:not(.ec-plain)::before, .ec-card:not(.ec-plain)::after { transition-duration: .01ms !important; animation: none !important; }
  .ec-card:hover, .ec-card:focus-within { transform: none !important; }
}

/* Quiet boxes: no destination, so no pointer cursor, no arrow, no lift. */
.ec-quiet { isolation: isolate; }
.ec-quiet:not(.ec-plain)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .ec-quiet, .ec-quiet:not(.ec-plain)::before, .ec-quiet:not(.ec-plain)::after { transition-duration: .01ms !important; } }

/* psihologija.me skin "Nebo": no lift; the sky tint spreads from the point the
 * cursor enters, the border turns brand blue and a yellow marker underlines the title. */
.ec-card { --ec-focus: #00719A; transition: border-color .3s ease, box-shadow .3s ease; overflow: hidden; }
.ec-card:not(.ec-plain)::before { background: radial-gradient(circle at var(--ec-x, 50%) var(--ec-y, 50%), #E8F7FD 0, #E8F7FD 35%, rgba(232,247,253,0) 75%); transform: scale(.6); transform-origin: var(--ec-x, 50%) var(--ec-y, 50%); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.ec-card:hover, .ec-card:focus-within { border-color: #0099CD !important; box-shadow: inset 0 0 0 1px #0099CD; }
.ec-card:not(.ec-plain):hover::before, .ec-card:not(.ec-plain):focus-within::before { opacity: 1; transform: scale(1.6); }
.ec-card .ec-title { background-image: linear-gradient(#F7ED38, #F7ED38); background-repeat: no-repeat; background-size: 0 .38em; background-position: 0 88%; transition: background-size .35s cubic-bezier(.2,.7,.2,1); }
.ec-card:hover .ec-title, .ec-card:focus-within .ec-title { background-size: 100% .38em; }
.ec-arrow { color: #00719A; }

/* Quiet: a light sky tint gathers at the cursor and the border turns brand blue; no marker. */
.ec-quiet { transition: border-color .3s ease; overflow: hidden; }
.ec-quiet:not(.ec-plain)::before { background: radial-gradient(circle at var(--ec-x, 50%) var(--ec-y, 50%), rgba(232,247,253,.9) 0, rgba(232,247,253,0) 55%); }
.ec-quiet:hover { border-color: #0099CD !important; }
.ec-quiet:not(.ec-plain):hover::before { opacity: 1; }