/* Responsive information cards. Desktop artwork stays in hero-overrides.css. */
.about-photo-stage {
  background-image: url("assets/onas-pozadi-les-original-optimized.webp");
}

.mobile-map-hint,
.mobile-map-details {
  display: none;
}

@media (max-width: 1100px) {
  #info > .container {
    width: min(960px, calc(100% - 40px));
  }

  #info .cards,
  #info .date-afterparty-row,
  #info .parking-gift-row,
  #info .info-card-row {
    gap: 24px;
  }

  #info .parking-gift-row,
  #info .info-card-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #info .cards article,
  #info .cards .seating-restrictions-row article {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    min-width: 0;
    grid-column: auto;
  }

  #info .cards article,
  #info .cards.reveal-ready article,
  #info .cards.reveal-ready article.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
  }

  #info .date-afterparty-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  #info .date-card,
  #info .afterparty-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #info .location-card,
  #info .parking-card,
  #info .dresscode-card,
  #info .supplier-card,
  #info .cards .accommodation-card,
  #info .cards .seating-card {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr);
    align-items: stretch;
  }

  #info .date-card-copy,
  #info .afterparty-card-copy,
  #info .location-card-copy,
  #info .parking-card-copy,
  #info .dresscode-card-copy,
  #info .supplier-card-copy,
  #info .accommodation-card-copy,
  #info .seating-card-copy,
  #info .cards .gift-card,
  #info .cards .storage-card,
  #info .cards .restrictions-card {
    padding: 28px !important;
  }

  #info .cards article h3 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 15px;
  }

  #info .cards article p,
  #info .cards .parking-rules,
  #info .cards .restrictions-card ul,
  #info .cards .restrictions-card h4,
  #info .location-card-copy address {
    font-size: .94rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    hyphens: none;
  }

  #info .cards article p {
    margin-bottom: 0;
    opacity: .85;
  }

  #info .cards .parking-rules {
    gap: 0;
    margin-top: 18px;
  }

  #info .cards .restrictions-card h4 {
    margin: 18px 0 7px;
  }

  #info .cards .restrictions-card ul {
    padding-left: 20px;
  }

  #info .cards .restrictions-card li + li {
    margin-top: 4px;
  }

  #info .storage-button {
    min-height: 46px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
  }

  /* Užší viditelná plocha; dotyková oblast zůstává pohodlně vysoká. */
  #info .afterparty-join-button,
  #info .storage-card .storage-button {
    position: relative;
    isolation: isolate;
    display: flex;
    width: calc(100% - 2cm);
    margin-right: auto;
    margin-left: auto;
    background: transparent;
    box-shadow: none;
  }

  #info .afterparty-join-button::before,
  #info .storage-card .storage-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px 0;
    border-radius: inherit;
    background: #49372f;
  }

  #info .afterparty-join-button:hover,
  #info .storage-card .storage-button:hover {
    box-shadow: none;
  }

  #info .date-card-countdown,
  #info .afterparty-spotify {
    border-top: 1px solid #ebe6df;
    border-left: 0;
  }

  #info .date-card-countdown {
    min-height: 0;
  }

  #info .date-card-countdown-bubble {
    padding: 26px 24px;
  }

  #info .date-card-countdown-list {
    width: 148px;
    height: 148px;
  }

  #info .date-card-countdown-bubble > p {
    margin: 0 0 18px;
  }

  #info .date-card-countdown-bubble > p span {
    font-size: .68rem;
  }

  #info .afterparty-spotify-code {
    height: 300px;
    padding: 18px 28px;
  }

  #info .location-card-map {
    height: 100%;
    min-height: 340px;
    border-radius: 0;
  }

  #info .parking-card-map {
    height: auto;
    min-height: 0;
    align-items: center;
    border-top: 0;
  }

  #info .parking-map-layer {
    align-self: center;
    aspect-ratio: 4 / 3;
  }

  #info .accommodation-card-content {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    align-self: center;
    border-top: 0;
  }

  #info .dresscode-card-content {
    height: auto;
    min-height: 350px;
    padding: 26px 0;
    justify-content: center;
  }

  #info .dresscode-palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 410px;
    padding: 15px 24px 0;
  }

  #info .dresscode-color {
    max-width: 96px;
    padding: 6px;
    grid-template-rows: auto 25px;
  }

  #info .dresscode-color small {
    font-size: .58rem;
    letter-spacing: 0;
  }

  #info .dresscode-color,
  #info .dresscode-palette:has(.dresscode-color:hover) .dresscode-color {
    opacity: 1;
    transform: none;
  }

  #info .supplier-links {
    min-width: 0;
  }

  #info .seating-card-content {
    height: auto;
    min-height: 310px;
    border-top: 0;
    overflow: hidden;
  }

  #info .seating-plan-object {
    position: absolute;
    inset: 0;
  }

  #info .seating-construction {
    width: min(235px, 78%);
  }

  #info .seating-work-in-progress h4 {
    width: min(248px, 100%);
    height: auto;
    aspect-ratio: 248 / 42.234;
    overflow: hidden;
    background: url("assets/seating-work-script-mobile.png") center / contain no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
}

@media (max-width: 760px) and (forced-colors: active) {
  #info .seating-work-in-progress h4 {
    width: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: none;
    color: CanvasText;
    font-size: 1.4rem;
    line-height: 1.35;
  }
}

html.map-touch-ui #info .dresscode-palette .dresscode-color.is-active {
  z-index: 2;
  opacity: 1;
  box-shadow: 0 12px 25px rgba(75, 62, 51, .16);
  transform: translateY(-4px) scale(1.055);
}

html.map-touch-ui #info .dresscode-palette:has(.dresscode-color.is-active) .dresscode-color:not(.is-active) {
  opacity: .7;
  transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  html.map-touch-ui #info .dresscode-color {
    transition: none;
  }
}

/* Native scrolling is also used on large touch-screen tablets. */
.supplier-links.is-native-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #b6a28e #eee8df;
  touch-action: pan-x pan-y;
}

.supplier-links.is-native-scroll .supplier-track {
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 16px;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.supplier-links.is-native-scroll .supplier-link {
  flex: 0 0 64%;
  min-width: 0;
  min-height: 310px;
  border-radius: 10px;
  scroll-snap-align: start;
  transform: none;
}

.supplier-links.is-native-scroll .supplier-link-copy {
  padding: 14px 12px;
  /* An opaque footer lets the card's own rounded corners clip cleanly. */
  background: #fff;
  backdrop-filter: none;
}

.supplier-links.is-native-scroll .supplier-link-copy strong {
  font-size: .91rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.supplier-links.is-native-scroll .supplier-link-copy small {
  font-size: .72rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

html.map-touch-ui #info .parking-tooltip,
html.map-touch-ui #info .accommodation-tooltip {
  display: none;
}

html.map-touch-ui #info .parking-marker,
html.map-touch-ui #info .accommodation-marker {
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  animation: parking-pulse 2.6s ease-out infinite;
  touch-action: manipulation;
}

/* Keep map art legible while making each number easy to tap. */
html.map-touch-ui #info .parking-marker::before,
html.map-touch-ui #info .accommodation-marker::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

html.map-touch-ui #info .parking-marker-number,
html.map-touch-ui #info .accommodation-marker-number {
  font-size: .94rem;
  /* Georgia's visible numeral sits a little below its line box center. */
  transform: translateY(-.1em);
}

html.map-touch-ui #info .parking-marker.is-active,
html.map-touch-ui #info .accommodation-marker.is-active {
  z-index: 5;
  outline: 2px solid #fff;
  outline-offset: 3px;
  background: #382a23;
  box-shadow: 0 0 0 6px rgba(73, 55, 47, .2);
  animation: none;
}

html.map-touch-ui #info .parking-marker:not(.is-active):focus:not(:focus-visible),
html.map-touch-ui #info .accommodation-marker:not(.is-active):focus:not(:focus-visible) {
  outline: none;
}

html.map-touch-ui #info .accommodation-marker-3 {
  left: 87.5%;
  top: 77%;
}

html.map-touch-ui #info .accommodation-marker-4 {
  left: 91%;
  top: 23%;
}

html.map-touch-ui #info .accommodation-direction-arrow {
  height: 17px;
}

@media (prefers-reduced-motion: reduce) {
  html.map-touch-ui #info .parking-marker,
  html.map-touch-ui #info .accommodation-marker {
    animation: none;
  }
}

html.map-touch-ui #info .mobile-map-hint {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: 13px 22px;
  border-top: 1px solid #ebe6df;
  background: #faf8f4;
  color: #75695e;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  opacity: 1;
}

html.map-touch-ui #info .mobile-map-details:not([hidden]) {
  display: block;
  grid-column: 1 / -1;
  padding: 20px 24px 24px;
  border-top: 1px solid #ebe6df;
  background: #fffdf9;
}

html.map-touch-ui #info .mobile-map-details-title {
  display: block;
  font: 400 1.25rem/1.3 var(--font-display);
  color: #49372f;
}

html.map-touch-ui #info .mobile-map-details-copy {
  margin: 8px 0 0;
  color: #514941;
  font-size: .9rem;
  line-height: 1.65;
  opacity: 1;
}

@media (min-width: 1101px) {
  .supplier-links.is-native-scroll .supplier-link {
    flex-basis: 23%;
  }
}

@media (max-width: 700px) {
  #info .supplier-card {
    background: #f3efe9;
  }

  #info .supplier-card-copy {
    background: #fff;
  }

  .supplier-carousel-shell {
    background: #f3efe9;
  }

  .supplier-links.is-native-scroll {
    --supplier-side-gutter: calc(42px + .5cm);
    width: calc(100% - var(--supplier-side-gutter) - var(--supplier-side-gutter));
    margin-inline: var(--supplier-side-gutter);
    scroll-padding-inline: 0;
    background: #f3efe9;
  }

  .supplier-links.is-native-scroll .supplier-track {
    gap: 16px;
    padding-inline: 0;
    padding-block: .4cm;
  }

  .supplier-links.is-native-scroll .supplier-track::after {
    display: none;
  }

  .supplier-links.is-native-scroll {
    scrollbar-width: none;
  }

  .supplier-links.is-native-scroll::-webkit-scrollbar {
    display: none;
  }

  .supplier-carousel-shell:has(.is-native-scroll) .supplier-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 34px;
    height: 58px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(73, 55, 47, .14);
    border-radius: 999px;
    background: rgba(251, 249, 245, .95);
    box-shadow: 0 2px 10px rgba(48, 36, 28, .14);
    color: #49372f;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
  }

  .supplier-carousel-shell .supplier-nav-prev { left: 8px; }
  .supplier-carousel-shell .supplier-nav-next { right: 8px; }

  .supplier-carousel-shell .supplier-nav span {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .supplier-carousel-shell .supplier-nav-prev span {
    transform: rotate(-135deg);
  }

  .supplier-carousel-shell .supplier-nav:disabled {
    opacity: .35;
    cursor: default;
  }

  .supplier-carousel-shell .supplier-nav:focus-visible {
    outline: 2px solid #49372f;
    outline-offset: 3px;
  }

  #info .cards .parking-rules {
    font-size: .9rem;
  }

  #info .parking-rule-place {
    display: none;
  }

  #info > .container {
    width: calc(100% - 28px);
  }

  #info .cards {
    margin-top: 30px;
  }

  #info .cards,
  #info .date-afterparty-row,
  #info .parking-gift-row,
  #info .info-card-row {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  #info .cards .date-card,
  #info .cards .afterparty-card,
  #info .cards .location-card,
  #info .cards .parking-card,
  #info .cards .dresscode-card,
  #info .cards .supplier-card,
  #info .cards .accommodation-card,
  #info .cards .seating-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #info .date-card-copy,
  #info .afterparty-card-copy,
  #info .location-card-copy,
  #info .parking-card-copy,
  #info .dresscode-card-copy,
  #info .supplier-card-copy,
  #info .accommodation-card-copy,
  #info .seating-card-copy,
  #info .cards .gift-card,
  #info .cards .storage-card,
  #info .cards .restrictions-card {
    padding: 25px 23px 27px !important;
  }

  #info .cards article h3 {
    font-size: 1.65rem;
  }

  #info .date-card-copy .date-card-schedule {
    margin-top: 18px;
  }

  #info .date-card-copy .date-card-ceremony {
    margin-top: 8px;
  }

  #info .date-card-countdown-bubble {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    gap: 16px;
    padding: 22px;
  }

  #info .date-card-countdown-bubble > p {
    margin: 0;
    text-align: left;
  }

  #info .date-card-countdown-bubble > p strong {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  #info .date-card-countdown-bubble > p span {
    font-size: .63rem;
    line-height: 1.6;
    letter-spacing: .07em;
  }

  #info .date-card-countdown-list {
    width: 112px;
    height: 112px;
    padding: 14px;
  }

  #info .date-card-countdown-list::before {
    inset: 6px;
  }

  #info .date-card-countdown-list div:first-child strong {
    font-size: 2rem;
  }

  #info .date-card-countdown-list span {
    font-size: .62rem;
  }

  #info .afterparty-spotify-code {
    height: 290px;
    padding: 15px 26px;
  }

  #info .location-card-map {
    height: 310px;
    min-height: 0;
    border-top: 1px solid #ebe6df;
  }

  #info .parking-card-map,
  #info .accommodation-card-content {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-left: 0;
    border-top: 1px solid #ebe6df;
  }

  #info .dresscode-card-content {
    min-height: 0;
    padding: 26px 0;
    border-left: 0;
    border-top: 1px solid #ebe6df;
  }

  #info .dresscode-palette-title {
    margin-bottom: 5px;
    padding: 10px 18px;
    font-size: 1.4rem;
  }

  #info .dresscode-palette {
    max-width: 350px;
    gap: 12px;
    padding: 14px 23px 0;
  }

  #info .dresscode-color {
    grid-template-rows: auto 27px;
  }

  #info .dresscode-color small {
    font-size: .59rem;
  }

  #info .supplier-links {
    border-top: 0;
  }

  .supplier-links.is-native-scroll .supplier-link {
    min-height: 310px;
    flex-basis: 100%;
  }

  #info .seating-card-content {
    height: 280px;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid #ebe6df;
  }
}

@media (prefers-reduced-motion: reduce) {
  .supplier-links.is-native-scroll {
    scroll-behavior: auto;
  }
}

@media (max-width: 760px) {
  #info .cards article.supplier-card:hover,
  #info .cards.reveal-ready article.supplier-card.is-visible:hover {
    transform: none;
    box-shadow: 0 8px 25px rgba(40, 34, 27, .045);
  }

  #info .supplier-link:not(.is-pending):hover,
  #info .supplier-link:not(.is-pending):focus-visible {
    transform: none;
    box-shadow: none;
  }

  #info .dresscode-card-content {
    background: #f5f1ec;
  }

  #info .dresscode-card-background {
    transform: translateY(calc(-15% + 1cm)) scale(1.5);
    transform-origin: center;
    filter: blur(1px);
    opacity: .82;
  }
}

@media (max-width: 560px) {
  #harmonogram .timeline p {
    left: -11px;
  }

  #harmonogram .timeline > div:nth-child(even) p {
    left: 11px;
  }
}

/* Mobilní mapa místa: volnější prostor vpravo od informačního štítku. */
@media (max-width: 700px) {
  #info .location-card-map .map-place-card {
    left: 12px;
    right: calc(12px + min(3cm, max(0px, 100% - 224px)));
    min-width: 0;
  }
}

/* Na telefonu zůstává nahoře jen tlačítko; původní rozbalovací menu se ukáže až po klepnutí. */
@media (max-width: 760px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .nav {
    position: relative;
    width: 100%;
    min-height: 64px;
    justify-content: flex-end;
    padding: 10px 12px;
  }

  .brand {
    display: block;
    position: absolute;
    left: 50%;
    margin: 0;
    font-size: clamp(.95rem, 4.8vw, 1.18rem);
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .menu-button {
    display: block;
    min-width: 60px;
    min-height: 44px;
    cursor: pointer;
  }

  .menu-button:focus-visible {
    outline: 2px solid #927c66;
    outline-offset: 2px;
  }

  .menu {
    display: none;
    top: 62px;
    left: auto;
    right: 12px;
    width: 205px;
    max-width: calc(100vw - 24px);
  }

  .menu.open {
    display: flex;
  }

  .hero {
    height: max(520px, calc(100svh - 140px));
    min-height: 0;
    background-repeat: no-repeat;
    background-size: auto calc(100% + 160px);
    background-position: center calc(50% + 35px + var(--hero-parallax-y, 0px));
  }

  .hero-content h1 {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
    letter-spacing: .025em;
    line-height: 1.08;
    white-space: nowrap;
  }
}