/* Strona: Symulacja — zachowaj spójność z base.css; unikalne prefiksy .sym- */

:root {
  --sym-tropic-1: #0b6b6b;
  --sym-tropic-2: #18a999;
  --sym-sand: #f6f1e9;
  --sym-sky: #e8faf7;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sym-main { background: var(--sym-sky); }

/* Hero */
.sym-hero { display: grid; gap: 1rem; align-items: end; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,107,107,0.06) 100%); }
.sym-hero__content { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 0; text-align: left; }
.sym-hero__lead { font-size: 1.1rem; opacity: 0.95; }
.sym-hero__media { margin: 0; line-height: 0; }
.sym-hero__media img { width: 100%; height: auto; display: block; border-radius: 0; }

/* Subnav */
.sym-subnav { position: sticky; top: 0; z-index: 50; background: #ffffffcc; backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,0.06); }
.sym-subnav__list { display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; padding: .5rem 1rem; margin: 0; list-style: none; }
.sym-subnav__link { display: inline-block; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; color: #083f3f; border: 1px solid transparent; white-space: nowrap; }
.sym-subnav__link:hover, .sym-subnav__link:focus { border-color: var(--sym-tropic-2); outline: none; }
.sym-subnav__link.is-active { background: var(--sym-tropic-2); color: #fff; }

/* Sections */
.sym-section { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.sym-section + .sym-section { margin-top: .75rem; }
.sym-section__header { margin-bottom: 1rem; }
.sym-note { font-size: .95rem; color: #0d5c5c; background: #e9f8f5; border-left: 4px solid var(--sym-tropic-2); padding: .75rem; border-radius: .25rem; }

/* Grid & cards */
.sym-grid { display: grid; gap: 1rem; }
.sym-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sym-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sym-card { background: #ffffff; border: 1px solid rgba(0,0,0,.06); border-radius: .5rem; padding: 1rem; }

/* Media */
.sym-figure { margin: 1rem 0 0; }
.sym-figure img { width: 100%; height: auto; border-radius: .5rem; }
.sym-figure figcaption { font-size: .9rem; color: #2c5555; margin-top: .25rem; }

/* Search */
.sym-search { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: 1rem; }
.sym-search__input { padding: .75rem; border-radius: .5rem; border: 1px solid rgba(0,0,0,.15); }
.sym-search__hint { font-size: .85rem; color: #2c5555; grid-column: 1 / -1; margin: 0; }

/* Buttons & inputs */
.sym-btn { display: inline-block; background: var(--sym-tropic-2); color: #fff; border: none; padding: .65rem 1rem; border-radius: .5rem; text-decoration: none; cursor: pointer; transition: transform .06s ease, background .2s ease; }
.sym-btn:hover, .sym-btn:focus { background: #149684; outline: none; }
.sym-btn:active { transform: translateY(1px); }
.sym-btn--alt { background: var(--sym-tropic-1); }
.sym-input, .sym-textarea { width: 100%; padding: .7rem; border-radius: .5rem; border: 1px solid rgba(0,0,0,.15); }

/* Actions */
.sym-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* Quiz */
.sym-quiz label { display: block; margin-bottom: .25rem; }
.sym-quiz__result { margin-top: .5rem; font-weight: 600; color: var(--sym-tropic-1); }

/* Feedback */
.sym-feedback { display: grid; gap: .5rem; margin-top: .5rem; }
.sym-feedback__list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.sym-feedback__list li { background: #f9fffe; border: 1px solid rgba(0,0,0,.06); border-radius: .5rem; padding: .5rem .75rem; }

/* Responsive refinements */
@media (min-width: 980px) {
  .sym-hero__content { padding-top: 3rem; }
}