/* ===================== HOSH Accordion (Title | IMG | Info | Price | +/−) ===================== */
:root {
  --acc-bg: #fff;
  --acc-row-bg: #efefef;
  --acc-border: #d7d7d7;
  --acc-sep: #cfcfcf;
  --acc-sep-soft: #e9e9e9;
  --acc-text: #000;
  --acc-info: #333;

  --acc-gap-min: 6px;
  --acc-gap-max: 12px;
  --acc-pad-min: 8px;
  --acc-pad-max: 14px;

  --acc-icon-min: 48px;
  --acc-icon-max: 96px;
  --acc-icon-h-min: 24px;
  --acc-icon-h-max: 48px;

  --acc-toggle: 36px;

  --acc-dur: 260ms;
  --acc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Wrap & rows */
.hosh-acc {
  margin: 0 0 24px;
  background: var(--acc-bg);
  border-top: 1px solid var(--acc-border);
}

.hosh-acc__item {
  background: var(--acc-bg);
  border-bottom: 1px solid var(--acc-border);
}

/* Pre-JS fallback */
.hosh-acc__panel[hidden] {
  display: none !important;
}

/* Header button */
.hosh-acc__summary {
  display: grid;
  width: 100%;
  cursor: pointer;
  align-items: center;
  text-align: left;
  color: var(--acc-text);
  background: var(--acc-row-bg);
  border: 0;
  border-bottom: 1px solid var(--acc-border);

  /* title | icon | info | price | toggle */
  grid-template-columns:
    minmax(0, 1.4fr) clamp(var(--acc-icon-min), 12vw, var(--acc-icon-max)) minmax(0, 2fr) max-content var(--acc-toggle);

  gap: clamp(var(--acc-gap-min), 1.6vw, var(--acc-gap-max));
  padding: clamp(var(--acc-pad-min), 2.2vw, 12px) clamp(var(--acc-pad-min), 2.2vw, var(--acc-pad-max));
  overflow-x: hidden;
  /* bez horizontálního scrollu */
  line-height: 1.25;
  font-weight: 600;
}

.hosh-acc__summary:focus {
  outline-offset: 2px;
}

/* svislé oddělovače mezi buňkami */
.hosh-acc__summary>*+* {
  border-inline-start: 1px solid var(--acc-sep);
  padding-inline-start: 12px;
}

/* Columns */
.hosh-acc__title,
.hosh-acc__info {
  min-width: 0;
  /* umožní smrštění v gridu */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hosh-acc__title {
  font-size: clamp(14px, 2.6vw, 16px);
}

.hosh-acc__info {
  font-size: clamp(12.5px, 2.4vw, 14px);
  color: var(--acc-info);
}

.hosh-acc__icon {
  width: clamp(var(--acc-icon-min), 12vw, var(--acc-icon-max));
  height: clamp(var(--acc-icon-h-min), 6vw, var(--acc-icon-h-max));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hosh-acc__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hosh-acc__price {
  font-weight: 700;
  font-size: clamp(13px, 2.5vw, 15px);
  white-space: nowrap;
  color: var(--acc-text);
}

.hosh-acc__toggle {
  width: var(--acc-toggle);
  height: var(--acc-toggle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--acc-dur) var(--acc-ease), opacity var(--acc-dur) ease;
  transform-origin: 50% 50%;
  opacity: .9;
}

.hosh-acc__toggle::before {
  content: "+";
  line-height: 1;
  font-size: clamp(18px, 5.5vw, 22px);
}

/* otevřený stav */
.hosh-acc__summary[aria-expanded="true"] .hosh-acc__toggle {
  transform: rotate(180deg);
  opacity: 1;
}

.hosh-acc__summary[aria-expanded="true"] .hosh-acc__toggle::before {
  content: "–";
}

/* Panel (animovaný) */
.hosh-acc__panel {
  display: block;
  background: var(--acc-bg);
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-4px);
  padding-block: 0;
  /* vertikální padding se animuje do otevřeného stavu */

  transition:
    height var(--acc-dur) var(--acc-ease),
    opacity var(--acc-dur) ease,
    transform var(--acc-dur) var(--acc-ease),
    padding-block-start var(--acc-dur) var(--acc-ease),
    padding-block-end var(--acc-dur) var(--acc-ease);
  will-change: height, opacity, transform;
}

.hosh-acc__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  padding-block: 16px;
}

.hosh-acc__panel ul {
  margin: 0;
  padding-inline-start: 20px;
}

.hosh-acc__panel li {
  margin: 6px 0;
}

.hosh-acc__panel a {
  color: inherit;
  text-decoration: underline;
}

/* Jemné zjemnění oddělovačů na úzkých šířkách */
@media (max-width: 520px) {
  .hosh-acc__summary>*+* {
    border-inline-start-color: var(--acc-sep-soft);
    padding-inline-start: clamp(6px, 1.8vw, 10px);
  }
}

/* Preferuje méně pohybu */
@media (prefers-reduced-motion: reduce) {

  .hosh-acc__panel,
  .hosh-acc__toggle {
    transition: none !important;
  }
}