/* Sizes, colours and spacing are taken from assets/pages/page-desktop.svg and page-mobile.svg */
:root {
  --teal-900: #03857c;
  --teal-600: #57aea8;
  --teal-300: #abd6d3;
  --teal-200: #c7e4e2;
  --teal-100: #e3f1f0;
  --mint: #eaf9f8;
  --grey-900: #37424a;
  --grey-700: #636c72;
  --grey-500: #a6abaf;
  --card-bg: linear-gradient(rgb(234 249 248 / 60%), rgb(249 255 255 / 60%));
  --shadow-teal: rgb(3 133 124 / 18%);
  /* SVG radial gradients mix colour and alpha separately; the middle stops reproduce that in CSS */
  --blob: var(--teal-300), rgb(185 221 218 / 75%) 25%, rgb(199 228 226 / 50%) 50%, rgb(213 234 233 / 25%) 75%,
    rgb(227 241 240 / 0);
  --blob-70: rgb(171 214 211 / 70%), rgb(185 221 218 / 52.5%) 25%, rgb(199 228 226 / 35%) 50%,
    rgb(213 234 233 / 17.5%) 75%, rgb(227 241 240 / 0);
}

* {
  box-sizing: border-box;
}

/* "ค้นหาคลินิกใกล้คุณ" in the hero links to #clinics */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--grey-900);
  background: #fff;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--teal-900);
  font-weight: 700;
}

h2 {
  font-size: 24px;
  line-height: 32.4px;
}

/* Line breaks copied from the design where the browser would wrap Thai text at a different word.
   They only apply where the layout is as wide as the design, so narrower screens keep natural wrapping. */
.br-d,
.br-m {
  display: none;
}

@media (min-width: 375px) and (max-width: 1023px) {
  .br-m {
    display: inline;
  }
}

@media (min-width: 1212px) {
  .br-d {
    display: inline;
  }
}

/* Hero: on mobile the illustration covers the whole hero at half opacity */
.hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  /* the mobile design's gradient stops 16px short of both edges */
  background: linear-gradient(140deg, var(--mint), rgb(234 249 248 / 40%)) 16px 0 / calc(100% - 32px) 100% no-repeat;
}

.hero-deco {
  display: none;
  position: absolute;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.hero-text {
  position: relative;
  padding: 218px 32px 0;
}

/* fractional sizes come from the design (the text was scaled in Figma) */
.hero h1 {
  font-size: 31.6px;
  line-height: 42px;
}

/* Figma applies -2% letter-spacing to every code point, including Thai vowel and tone marks,
   while browsers apply it per grapheme cluster: each line gets -2% × code-point gaps / cluster gaps */
.h1-line1 {
  letter-spacing: -0.0215em;
}

.h1-line2 {
  letter-spacing: -0.0343em;
}

.h1-line3 {
  letter-spacing: -0.03em;
}

.hero p {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: var(--teal-600);
}

.hero-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 180px;
  height: 44px;
  margin-top: 80px;
  border-radius: 12px;
  background: var(--teal-900);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 25px var(--shadow-teal);
}

.hero-button img {
  width: 9.94px;
  height: 6.44px;
}

/* Info cards and the X2 panel */
.intro {
  padding: 64px 16px;
}

.info-cards {
  display: grid;
  gap: 14px;
  margin-top: 27px;
}

.info-card {
  min-height: 242px;
  padding: 24px 20px;
  border: 1px solid var(--teal-100);
  border-radius: 16px;
  background: var(--card-bg);
}

.info-card img {
  display: block;
}

.info-card h3 {
  margin-top: 14px;
  font-size: 16px;
  line-height: 24px;
}

.info-card p,
.panel {
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-700);
}

.info-card p {
  margin-top: 12px;
}

.info-cards + h2 {
  margin-top: 40px;
}

.panel {
  margin-top: 27px;
  padding: 24px 20px;
  border: 1px solid var(--teal-100);
  border-radius: 16px;
  /* the design shows the room illustration at 40% opacity over white */
  background:
    linear-gradient(rgb(255 255 255 / 60%), rgb(255 255 255 / 60%)),
    url('images/panel-bg.jpg') center / cover;
  background-origin: border-box;
}

.panel p + p,
.panel ul + p {
  margin-top: 24px;
}

.panel ul {
  padding-left: 21px;
  list-style: none;
}

.panel li {
  position: relative;
}

.panel li::before {
  content: '•';
  position: absolute;
  left: -14px;
}

/* Clinic search */
.clinics {
  position: relative;
  padding: 48px 16px 52px;
  text-align: center;
}

/* Fixed-height background; the terms section's white background covers it when there are few or no
   results (assets/pages/page-desktop-without-find-clinic.svg). The mobile design starts it 16px from the left edge. */
.clinics::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 16px;
  height: 1062px;
  background:
    radial-gradient(circle 160px at 80px 310px, var(--blob)),
    radial-gradient(circle 180px at 300px 630px, var(--blob-70)),
    linear-gradient(var(--mint), #fff);
}

.clinics-subtitle {
  margin-top: 8px;
  font-size: 15px;
  line-height: 27px;
  color: var(--grey-700);
}

.search-box {
  max-width: 840px;
  margin: 28px auto 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--teal-100);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 45px rgb(3 133 124 / 9%);
  text-align: left;
}

.field + .field {
  margin-top: 14px;
}

.district-field {
  display: none;
}

.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--teal-900);
}

.field select,
.field input {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 3px 44px 0 15px;
  border: 1px solid var(--teal-100);
  border-radius: 13px;
  font: inherit;
  font-size: 16px;
  color: var(--grey-900);
  appearance: none;
  background: #fff no-repeat right 12px center / 24px;
}

.field select {
  background-image: url('icons/chevron-down.svg');
}

/* nothing chosen yet: same grey as the search placeholder */
.field select:has(option[value='']:checked) {
  color: var(--grey-500);
}

.field option {
  color: var(--grey-900);
}

.field input {
  background-image: url('icons/search.svg');
}

.field input::placeholder {
  color: var(--grey-500);
}

.field input::-webkit-search-cancel-button {
  display: none;
}

.status {
  margin-top: 17px;
  font-size: 14px;
  line-height: 20px;
  color: var(--teal-600);
}

.status:empty,
.clinic-list:empty {
  display: none;
}

.clinic-list {
  display: grid;
  gap: 14px;
  margin-top: 11px;
}

.clinic-card {
  padding: 16px;
  border: 1px solid var(--teal-100);
  border-radius: 16px;
  background: var(--card-bg);
}

/* assets/images/image-placeholder.png, rounded corners included */
.clinic-photo {
  display: block;
  width: 100%;
  height: 150px;
}

.clinic-details {
  margin-top: 10px;
}

.clinic-name {
  font-size: 16px;
  line-height: 24px;
}

.clinic-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--grey-700);
}

.clinic-name + .clinic-info {
  margin-top: 8px;
}

.clinic-info img {
  flex-shrink: 0;
  margin-top: 3px;
}

.clinic-phone.is-empty {
  color: var(--grey-500);
}

.clinic-actions {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.button-line,
.button-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding-top: 1px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.button-line {
  background: var(--teal-900);
  color: #fff;
  box-shadow: 0 10px 25px var(--shadow-teal);
}

.button-outline {
  border: 1px solid var(--teal-200);
  background: #fff;
  color: var(--teal-900);
}

.button-line img,
.button-outline img {
  object-fit: contain;
}

/* Links without href have no data in the sheet */
.button-line:not([href]),
.button-outline:not([href]) {
  opacity: 0.4;
  filter: grayscale(1);
  box-shadow: none;
  cursor: not-allowed;
}

/* shown when a button without a link is clicked */
.snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--grey-900);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 10px 25px rgb(55 66 74 / 25%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s, transform 0.2s;
}

.snackbar.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 20px;
  color: var(--grey-700);
}

/* Terms */
.terms {
  padding: 60px 16px 22px;
  background: #fff;
}

.terms p {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--teal-100);
  border-radius: 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-700);
}

.terms h2 + p {
  margin-top: 15.5px;
}

@media (min-width: 1024px) {
  .mobile-break {
    display: none;
  }

  h2 {
    font-size: 28px;
    line-height: 37.8px;
  }

  .clinics h2,
  .terms h2 {
    font-size: 32px;
    line-height: 43.2px;
  }

  .hero {
    height: 698px;
    background:
      radial-gradient(circle 160px at 80px 310px, var(--blob)),
      radial-gradient(circle 180px at 300px 630px, var(--blob-70)),
      linear-gradient(var(--mint), #fff);
  }

  .hero-deco {
    display: block;
    top: 158px;
    left: calc(50% - 141px);
    width: 282px;
    height: 282px;
  }

  .hero-image {
    inset: auto;
    top: 24px;
    left: calc(50% + 35px);
    width: calc(50% - 35px);
    height: 634px;
    object-position: 50% 35%;
    border-radius: 32px;
    opacity: 1;
  }

  .hero-text {
    width: min(1180px, 100% - 32px);
    margin: 0 auto;
    padding: 158px 0 0;
  }

  .hero h1 {
    font-size: 57.1px;
    line-height: 76px;
  }

  .intro {
    width: min(1180px, 100% - 32px);
    margin: 0 auto;
    padding: 92px 0 90px;
  }

  .info-cards {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
  }

  .info-cards + h2 {
    margin-top: 42px;
  }

  .panel {
    margin-top: 20px;
  }

  .clinics {
    padding-top: 88px;
    padding-bottom: 90px;
  }

  .clinics::before {
    left: 0;
    height: 979px;
  }

  .clinics-subtitle {
    margin-top: 7px;
  }

  .district-field {
    display: block;
  }

  .clinic-list {
    gap: 12px;
    margin-top: 9px;
  }

  /* picture on the left, name / address / phone beside it, buttons across the bottom */
  .clinic-card {
    display: grid;
    grid-template-columns: 146px 1fr;
    column-gap: 24px;
  }

  .clinic-photo {
    height: 82px;
  }

  .clinic-details {
    margin-top: 2px;
  }

  .clinic-actions {
    grid-column: 1 / -1;
    grid-template-columns: 242.667fr 244.667fr 244.667fr;
    gap: 16px;
  }

  .note {
    max-width: 565px;
  }

  /* full-width white background, 880px content */
  .terms {
    padding: 110px calc((100% - 880px) / 2) 22px;
  }

  .terms h2 + p {
    margin-top: 19px;
  }
}