/* LOCATION page styles. Hero reuses the established PRESS / Contact .press-hero system. */
@import url("press.css");

.location-section {
  padding: clamp(64px, calc(44.63px + 4.967vw), 140px) var(--page-gutter);
  background: var(--color-white);
  color: var(--color-stone-800);
}

.location-container {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.location-title {
  margin: 0 0 var(--space-l);
  font-size: var(--fs-kr-h2);
  font-weight: 700;
  line-height: var(--lh-kr-h2);
  letter-spacing: -0.01em;
  text-align: center;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: var(--layout-padding-lg);
}

.location-info__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-padding-md);
}

.location-details {
  display: flex;
  flex-direction: column;
  width: min(100%, max-content);
  align-self: center;
  gap: var(--layout-padding-xs);
  min-width: 0;
  font-size: var(--fs-kr-body-1);
  line-height: var(--lh-kr-body-1);
  letter-spacing: -0.01em;
}

.location-detail {
  display: flex;
  align-items: center;
  gap: var(--layout-padding-sm);
  min-width: 0;
}

.location-detail__label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--layout-padding-xs);
}

.location-detail__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
}

.location-detail__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.location-detail__separator {
  width: 3px;
  height: 3px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-stone-500);
}

.location-address {
  min-width: 0;
  margin: 0;
  font-style: normal;
  overflow-wrap: anywhere;
}

.location-phone {
  color: inherit;
  text-decoration: none;
}

.location-map-links {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  gap: var(--layout-padding-sm);
}

.location-map-link {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: var(--layout-padding-xs);
  padding: var(--layout-padding-sm) var(--layout-padding-md);
  border-radius: var(--radius-full);
  background: var(--color-stone-100);
  color: var(--color-stone-800);
  font-size: var(--fs-kr-label);
  font-weight: 700;
  line-height: var(--lh-kr-label);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease;
}

.location-map-link img {
  display: block;
  flex: none;
  border-radius: var(--radius-2xs);
  object-fit: cover;
}

.is-keyboard-nav .location-phone:focus-visible,
.is-keyboard-nav .location-map-link:focus-visible {
  outline: 2px solid var(--color-welati-red);
  outline-offset: 3px;
}

.location-map {
  position: relative;
  width: 100%;
  min-height: 220px;
  max-height: 600px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-stone-300);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}

.location-map-marker {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  width: 211.154px;
  height: 69.2446px;
  transform: translate(-50%, -50%);
}

.location-map-marker__shape,
.location-map-marker__logo {
  position: absolute;
  display: block;
}

.location-map-marker__shape {
  top: 0;
  left: 0;
  width: 211.154px;
  height: 69.2446px;
}

.location-map-marker__logo {
  top: 30px;
  left: 50%;
  width: min(135px, 64%);
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
}

@media (max-width: 1023px) {
  .location-title {
    margin-bottom: clamp(var(--layout-padding-md), calc(9.375vw - 48px), var(--space-l));
    font-size: clamp(20px, calc(4.6875vw - 16px), var(--fs-kr-h2));
    text-align: left;
  }

  .location-detail__label-text,
  .location-detail__separator {
    display: none;
  }

  .location-detail {
    gap: var(--layout-padding-xs);
  }

  .location-address,
  .location-phone {
    flex: 1 1 auto;
  }

  .location-detail__icon {
    width: clamp(16px, calc(1.5625vw + 4px), 20px);
    height: clamp(16px, calc(1.5625vw + 4px), 20px);
  }

  .location-details {
    font-size: clamp(14px, calc(1.171875vw + 5px), var(--fs-kr-body-1));
    line-height: var(--lh-kr-body-1);
  }

  .location-map-links {
    align-self: flex-start;
    width: fit-content;
    justify-content: flex-start;
  }

  .location-map-link {
    width: auto;
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) {
  .location-map { aspect-ratio: 16 / 9; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .location-title { text-align: center; }

  .location-info { gap: var(--layout-padding-lg); }

  .location-info__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-padding-md);
  }

  .location-details {
    align-self: auto;
    width: auto;
    max-width: 100%;
    flex: 1 0 max-content;
  }

  .location-map-links {
    max-width: 100%;
    flex: 0 0 auto;
    gap: clamp(var(--layout-padding-xs), calc(3.125vw - 16px), var(--layout-padding-sm));
  }

  .location-map-link {
    min-height: clamp(50px, calc(2.34375vw + 32px), 56px);
    font-size: clamp(12px, calc(0.78125vw + 6px), var(--fs-kr-label));
  }

  .location-map-link img {
    width: clamp(16px, calc(3.125vw - 8px), 24px);
    height: clamp(16px, calc(3.125vw - 8px), 24px);
  }

  .location-map-marker {
    height: clamp(60px, calc(3.611171875vw + 32.2662px), 69.2446px);
    transform: translate(-50%, -50%) scale(clamp(0.75, 0.09765625vw, 1));
  }
}

@media (min-width: 1024px) {
  .location-info__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-padding-md);
  }

  .location-map-links {
    align-self: auto;
  }

  .location-map { aspect-ratio: 12 / 5; }
}

@media (max-width: 767px) {
  .location-title {
    margin-bottom: var(--layout-padding-md);
    font-size: 20px;
  }

  .location-info { gap: var(--space-lm); }

  .location-info__row {
    align-items: flex-start;
    gap: 19px;
  }

  .location-details {
    font-size: var(--fs-kr-label);
    line-height: var(--lh-kr-body-1);
    gap: var(--layout-padding-xs);
    width: 100%;
    align-self: flex-start;
  }

  .location-detail {
    align-items: flex-start;
    gap: var(--layout-padding-xs);
  }

  .location-address,
  .location-phone { min-width: 0; }

  .location-detail__icon {
    width: 16px;
    height: 16px;
  }

  .location-detail__icon-image--address {
    width: 11.52px;
    height: 14.4px;
    max-width: none;
    max-height: none;
  }

  .location-map-link {
    min-height: 50px;
    padding: var(--layout-padding-sm) var(--layout-padding-md);
    font-size: var(--fs-kr-chip);
  }

  .location-map-link img {
    width: 16px;
    height: 16px;
  }

  .location-map-links {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: var(--layout-padding-xs);
  }

  .location-map-link {
    width: auto;
    flex: 0 0 auto;
  }

  .location-map-marker {
    height: 60px;
    transform: translate(-50%, -50%) scale(0.75);
  }

  .location-map {
    aspect-ratio: 179 / 210;
    /* Keep the 390px Figma height, then meet the 768px tablet ratio smoothly. */
    max-height: clamp(387px, calc(454.0476px - 8.73016vw), 420px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .location-map-link:hover {
    background: var(--color-stone-200);
  }
}

@media (prefers-reduced-motion: reduce) {
  .location-map-link {
    transition: none;
  }
}