/* Location section and its ConcreteCMS contact_info block. */
.section.section--location {
  padding-block: 100px 110px;
  background-color: #173b35;
  background-image: linear-gradient(180deg, rgba(23, 59, 53, .94), rgba(23, 59, 53, .68)), url('https://supansapharma.com/application/files/7817/8851/5194/open-sign-pharmacy-door.webp');
  background-size: cover;
  background-position: center;
  color: #f7f2ea;
}
.section--location .container { max-width: 1204px; }
.section--location .section__header { margin-bottom: 64px; text-align: center; }
.section--location .section__header h2 {
  margin: 0 0 24px;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.4;
  color: #f7f2ea;
}
.section--location .section__header .lead { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.5; color: #f7f2ea; }
.location-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: stretch; }
.location-layout__image { position: relative; min-width: 0; min-height: 774px; border-radius: 34px; overflow: hidden; }
.location-layout__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Fill the photo column without changing the editable image block's markup. */
body:not(.ccm-edit-mode) .location-layout__image img { position: absolute; inset: 0; }
body.ccm-edit-mode .location-layout__image { overflow: visible; }
.location-layout__details { min-width: 0; }
.contact-info { display: flex; flex-direction: column; gap: 32px; height: 100%; color: #f7f2ea; font-family: 'Noto Sans Thai Looped', 'Noto Sans Thai', sans-serif; }
.contact-info, .contact-info * { box-sizing: border-box; }
.contact-info__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  border-radius: 34px;
  background: rgba(247, 242, 234, .09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 242, 234, .23);
  box-shadow: inset 0 0 0 1px rgba(247, 242, 234, .04);
  padding: 32px;
  flex: 1;
}
.contact-info__card:first-child { min-height: 340px; padding: 48px 40px; }
.contact-info__heading { margin: 0; font-family: inherit; font-size: 48px; font-weight: 400; line-height: 1.3; color: #f7f2ea; overflow-wrap: anywhere; }
.contact-info__row, .contact-info__note { margin: 0; font-family: inherit; font-size: 24px; line-height: 1.6; font-weight: 400; color: #f7f2ea; overflow-wrap: anywhere; }
.contact-info__button { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 24px; flex-shrink: 0; border-radius: 9999px; background: #ef691c; color: #f7f2ea; font-family: inherit; font-size: 24px; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; transition: background-color .2s ease; }
.contact-info__button:hover { background: #d65a12; color: #fff; }
.contact-info__button:focus-visible { outline: 3px solid #f7f2ea; outline-offset: 4px; }
@media (max-width: 1199px) {
  .location-layout { gap: 32px; }
  .contact-info__card, .contact-info__card:first-child { padding: 32px; }
  .contact-info__heading { font-size: 38px; }
  .contact-info__row, .contact-info__note { font-size: 21px; }
}
@media (max-width: 767px) {
  .section.section--location { padding-block: 64px; }
  .section--location .section__header { margin-bottom: 36px; }
  .section--location .section__header h2 { font-size: 36px; margin-bottom: 20px; }
  .section--location .section__header .lead { font-size: 18px; }
  .location-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .location-layout__image { min-height: 0; aspect-ratio: 540 / 650; border-radius: 28px; }
  .contact-info { gap: 24px; }
  .contact-info__card, .contact-info__card:first-child { min-height: 0; padding: 28px 24px; border-radius: 28px; }
  .contact-info__heading { font-size: 32px; }
  .contact-info__row, .contact-info__note { font-size: 18px; }
  .contact-info__button { min-height: 56px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .contact-info__button { transition: none; } }