/* Global */
.page-glaucoma {
  --section-margin: 5rem;
}
.page-glaucoma section .wrapper {
  margin-block-start: var(--section-margin) !important;
}
@media screen and (width > 1024px) {
  .page-glaucoma {
    --section-margin: 10rem;
  };
}
img,
svg {
  width: 100%;
}
em {
  font-style: normal;
}
h2, h3 {
  text-align: center;
}
h2 em,
h3 em {
  color: var(--teal);
}
h2 + p {
  text-align: center;
}
.page-glaucoma ul,
.page-glaucoma li {
  list-style: none !important;
}

/* Main */
.layout-main  {
  container: main / inline-size;
}
.layout-main .content nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-inline-start: 0;
  width: 100%;
  gap: 2rem;
}
.layout-main .content nav ul li {
  max-width: min(300px, 100%);
}
.layout-main .content nav ul .btn {
  color: white;
  background-color: var(--teal);
  height: 100%;
}
@container main (inline-size > 1439px) {
  .layout-main h1 {
    text-wrap: nowrap;
  }
}
@container main (inline-size < 450px) {
  .layout-main .content nav ul {
     grid-template-columns: 1fr;
  }
}

/* Section */

/* Glaucoma Journey */
main section:not(.layout-main) > * {
  border-block-start: 1px solid var(--teal);
  padding-block-start: var(--section-margin);
}
section:has(glaucoma-journey) {
  container: glaucoma-journey / inline-size;
}
.page-glaucoma h2 {
  margin-inline: auto;
  margin-block-end: 3rem;
}
glaucoma-journey {
  display: block;
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  background-size: 100%, 100%, cover;
  width: 100%;
  height: auto;
  aspect-ratio: 1389 / 355;
}
glaucoma-journey p {
  max-width: 60rem;
}
.page-glaucoma .layout-simple-content glaucoma-journey p:nth-of-type(2) {
  font-family: "Prompt-SemiBold", sans-serif;
  color: var(--teal);
}
glaucoma-journey img {
  display: none;
}
@container glaucoma-journey (inline-size < 1010px) {
  glaucoma-journey {
    background-image: none;
  }
  glaucoma-journey img {
    display: block;
    width: 100%;
    margin-block-start: 2rem;
  }
}

/* Twenty Year Study */
section:has(twentyyear-study) {
  container: twentyyear-study / inline-size;
}
twentyyear-study {
  --flow-space: 3.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 8.2rem;
  align-items: center;
}
.probability-chart,
blindness-ratio {
  display: block;
}
.probability-chart {
  position: relative;
  container: probability-chart / inline-size;
  margin: 0;
}
.probability-chart figcaption > p:nth-of-type(1) {
  --max-height: 9rem;
  --max-width: 22.4rem;
  --grey: var(--teal);
  position: absolute;
  top: calc(43% - var(--max-height) / 2);
  right: calc(0rem + var(--max-width) / 2);
  font-size: 2.6rem;
  max-width: var(--max-width);
  max-height: var(--max-height);
  text-align: center;
  font-family: 'Prompt-SemiBold', sans-serif;
  line-height: 1.15;
}
 .probability-chart h4,
.probability-chart p {
  max-width: 46.9rem;
}
.probability-chart h4 {
  --grey: black;
  text-align: center;
  font-family: 'Prompt-SemiBold', sans-serif;
  font-size: 2rem;
  margin-inline-start: 5rem;
}
.probability-chart figcaption p:nth-of-type(2) {
  margin-inline: auto;
}
.probability-chart img {
  margin-block-start: 2.5rem;
  margin-block-end: 1rem;
  max-width: 42.3rem;
  margin-inline: auto;
}
blindness-ratio > p.h4 {
  color: var(--teal);
  font-family: "Prompt-SemiBold", sans-serif;
  font-size: 2rem;
}
icon-text {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 3.5rem;
  margin-block-start: 2.5rem;
  align-items: center;
}
icon-text p em {
  font-family: "Prompt-SemiBold", sans-serif;
}
@container probability-chart (inline-size < 550px) {
  .probability-chart figcaption > p:nth-of-type(1) {
    right: 0;
  }
}
@container probability-chart (inline-size < 350px) {
  .probability-chart figcaption > p:nth-of-type(1) {
    font-size: clamp(20px, calc(2rem + ((1vw - 3.5px) * 4)), 22px);
    top: clamp(140px, calc(14rem + ((1vw - 3.5px) * -50)), 165px);
    text-align: right;
  }
}
@container twentyyear-study (inline-size < 1425px) {
  .probability-chart figcaption {
    text-align: center;
  }
}
@container twentyyear-study (inline-size < 1009px) {
  blindness-ratio > p {
    text-align: center;
  }
  twentyyear-study {
    grid-template-columns: 1fr;
  }
}
@container twentyyear-study (inline-size < 450px) {
  icon-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .probability-chart h4 {
    margin-inline: auto;
  }
  .probability-chart p:nth-of-type(1) {
    font-size: var(--font-size-mo);
  }
}
twentyyear-study + h3 {
  line-height: 1.2;
}
circle-loop {
  --svg-transform: calc(var(--wrapper-max-width) / 7 / 2);
  --middle-row-length: calc(670px / 3);
  --flow-space: 3.8rem;
  --arrow-max-width: calc((var(--wrapper-max-width) - 3 * var(--middle-row-length)) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr var(--middle-row-length) var(--middle-row-length) var(--middle-row-length) 1fr 1fr;
  grid-template-rows: 5.7rem auto auto auto 15rem;
  grid-template-areas:
    ". . card1 card1 card1 . ."
    "arrow1 arrow1 card1 card1 card1 arrow3 arrow3"
    "card2 card2 card2 . card3 card3 card3"
    "card2 card2 card2 . card3 card3 card3"
    ". . arrow5 arrow5 arrow5 . .";
  align-items: start;
}
circle-loop .mo {
  display: none;
}
circle-loop p {
  --grey: black;
}
circle-loop p em {
  font-family: "Prompt-SemiBold", sans-serif;
}
circle-loop > svg:nth-of-type(5) {
  max-height: var(--arrow-max-width);
}
loop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
loop-card:nth-of-type(1) {
  margin-block-end: 4.1rem;
}
loop-card:nth-of-type(1) h4 {
  max-width: 46rem;
}
loop-card h4 {
  font-family: "Prompt-SemiBold", sans-serif;
  color: var(--teal);
  text-align: center;
  margin-inline: auto;
  max-width: 36.1rem;
  margin-block-end: 3rem;
}
loop-card figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
loop-card figure figcaption {
  margin-block-start: 2rem;
  text-align: center;
}
circle-loop > svg:nth-of-type(1) {
  grid-area: arrow1;
  transform: translateX(var(--svg-transform));
}
circle-loop > svg:nth-of-type(3) {
  grid-area: arrow3;
  transform: translateX(calc(var(--svg-transform) * -1));
}
circle-loop > svg:nth-of-type(5) {
  grid-area: arrow5;
  transform: translateY(calc(var(--svg-transform) * -1 + 2rem));
}
circle-loop > svg:nth-of-type(2) {
  grid-area: arrow2;
}
circle-loop > svg:nth-of-type(4) {
  grid-area: arrow4;
}
circle-loop loop-card:nth-of-type(1) {
  grid-area: card1;
}
circle-loop loop-card:nth-of-type(2) {
  grid-area: card2;
}
circle-loop loop-card:nth-of-type(2) p {
  max-width: 48rem;
}
circle-loop loop-card:nth-of-type(3) {
  grid-area: card3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    "h4 h4 h4 h4 h4 h4 h4"
    "figure1 figure1 figure1 . figure2 figure2 figure2"
    ". . figure3 figure3 figure3 . .";
}
circle-loop loop-card:nth-of-type(3) h4 {
  grid-area: h4;
}
circle-loop loop-card:nth-of-type(3) figure:nth-of-type(1) {
  grid-area: figure1;
}
circle-loop loop-card:nth-of-type(3) figure:nth-of-type(2) {
  grid-area: figure2;
}
circle-loop loop-card:nth-of-type(3) figure:nth-of-type(3) {
  grid-area: figure3;
}
@container twentyyear-study (inline-size < 1425px) {
  circle-loop {
    grid-template-rows: 5.7rem auto auto auto 8rem;
  }
}
@container twentyyear-study (inline-size < 1009px) {
  circle-loop {
    --middle-row-length: calc(470px / 3);
    grid-template-rows: 5.7rem auto auto auto 3rem;
  }
  circle-loop > svg:nth-of-type(1) {
    transform: translateY(15rem);
  }
  circle-loop > svg:nth-of-type(3) {
    transform: translateY(15rem);
  }
  circle-loop > svg:nth-of-type(5) {
    transform: translateY(-10rem);
  }
}
@container twentyyear-study (inline-size < 755px) {
  circle-loop .desktop {
    display: none;
  }
  circle-loop .mo {
    display: block;
  }
  circle-loop {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "card1"
      "arrow2"
      "card3"
      "arrow4"
      "card2";
    row-gap: 2rem;;
  }
  loop-card:first-of-type {
    margin-block-end: 0;
  }
}

/* Glaucoma Treatment */
section:has(.treatment_list) {
  container: glaucoma-treatment / inline-size;
}
p:has(+ .treatment_list) {
  max-width: 1120px;
  margin-inline: auto;
  margin-block-end: 4rem;
}
.layout-simple-content .container ul.treatment_list {
  padding-inline-start: 0;
}
.treatment_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(min(300px, 100%)), 1fr));
  gap: 2.5rem;
}
.treatment_list li {
  list-style: none !important;
  margin-block-start: 0 !important;
  max-width: 100%;
}
treatment-card {
  --grey: black;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  height: 100%;
  color: black;
  border-radius: 1rem;
  padding-block: 3rem;
}
treatment-card p {
  margin-inline: 1.8rem;
}
treatment-card a.btn {
  font-family: "Prompt-SemiBold", sans-serif;
  margin-block-start: auto;
  background-color: var(--teal);
  color: white;
  padding-inline: 0.7rem;
  max-width: 24rem;
  min-height: 9.2rem;
  margin-inline: auto;
}
.treatment_list li:nth-of-type(1) treatment-card {
  background: linear-gradient(180deg, color-mix(in srgb, #D37D50 50%, white) 0%, #fff 100%);
}
.treatment_list li:nth-of-type(2) treatment-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 50%, white) 0%, #fff 100%);
}
.treatment_list li:nth-of-type(3) treatment-card {
  background: linear-gradient(180deg, color-mix(in srgb, #377F9E 50%, white) 0%, #fff 100%);
}
.treatment_list li:nth-of-type(4) treatment-card {
  background: linear-gradient(180deg, color-mix(in srgb, #E29941 50%, white) 0%, #fff 100%);
}
@media only screen and (width >= 1440px) {
  treatment-card h3.h4 {
    font-size: 2.2rem;
  }
}
@container glaucoma-treatment (inline-size < 665px) {
  .treatment_list li:nth-of-type(1) treatment-card {
    background: linear-gradient(180deg, color-mix(in srgb, #D37D50 50%, white) 0%, #fff 100%);
    border: 1px solid color-mix(in srgb, #D37D50 50%, white);
  }
  .treatment_list li:nth-of-type(2) treatment-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 50%, white) 0%, #fff 100%);
    border: 1px solid color-mix(in srgb, var(--teal) 50%, white);
  }
  .treatment_list li:nth-of-type(3) treatment-card {
    background: linear-gradient(180deg, color-mix(in srgb, #377F9E 50%, white) 0%, #fff 100%);
    border: 1px solid color-mix(in srgb, #377F9E 50%, white);
  }
  .treatment_list li:nth-of-type(4) treatment-card {
    background: linear-gradient(180deg, color-mix(in srgb, #E29941 50%, white) 0%, #fff 100%);
    border: 1px solid color-mix(in srgb, #E29941 50%, white);
  }
}

/* A Proactive Approach */
section:has(.proactive_list) {
  container: proactive-approach / inline-size;
}
section:has(.proactive_list) p {
  text-align: center;
}
section:has(.proactive_list) p.h4 {
  font-family: "Prompt-SemiBold", sans-serif;
  color: var(--teal);
}
.layout-simple-content .container ul.proactive_list {
  padding-inline-start: 0;
}
.proactive_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(min(300px, 100%)), 1fr));
  gap: 2.5rem;
}
.proactive_list figcaption {
  text-align: center;
}

/* Advance Patient Care */
.page-glaucoma .layout-three-column-card .wrapper > .card {
  padding: 0;
}
.layout-three-column-card h2 {
  --flow-space: 0;
}
.layout-three-column-card h3 {
  display: none;
}
.layout-three-column-card .card p {
  text-align: center;
}
.layout-three-column-card .card p + p {
  margin-block-start: 1rem;
}
.layout-three-column-card .card p:first-of-type {
  margin-block-end: 2rem;
}
.layout-three-column-card .card p:last-of-type {
  color: var(--grey);
}
.layout-three-column-card a.btn {
  display: none;
}

/* Your Practice */
section:has(.practice_process) {
  container: practice-process / inline-size;
}
.practice_process {
  --lasers: #D37D50;
  --procedural_pharmaceuticals: #0FB3A7;
  --tissue_sparing_migs: #377F9E;
  --mtmt: #0F7D73;
  --non_tissue_sparing_migs_procedures: #E29941;
  --filtering_surgery: #1B403C;
  --grey-one: #E7E6E6;
  --grey-two: #44546A;
  --el-gap: 1rem;

  border: 1px solid var(--teal);
  border-radius: 4rem;
}
.layout-simple-content .container ul.practice_process {
  padding: 4rem 5rem;
}
p:has(+ .practice_process) {
  text-align: left;
}
.practice_process h3 {
  font-family: "Prompt-SemiBold", sans-serif;
  color: var(--grey-two);
  text-align: left;
  display: inline;
}
.practice_process p {
  --grey: black;
  display: inline;
}
.practice_process p em {
  font-family: "Prompt-SemiBold", sans-serif;
}
.layout-simple-content .container .practice_process > li + li {
  margin-block-start: 0;
}
.practice_process > li:not(:last-of-type) {
  padding-block: 2rem;
  margin: 0;
}
.practice_process > li:first-of-type {
  padding-block-start: 0;
}
.practice_process > li:nth-of-type(-n+3) {
  border-block-end: 1px solid var(--grey-one);
}
.practice_process > li:nth-last-child(2) ul li:first-of-type svg {
  padding-inline: 0.8rem;
}
.practice_process ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--el-gap);
}
.layout-simple-content .container .practice_process ul {
  padding-inline-start: 0;
}
.practice_process ul li {
  display: grid;
  grid-template-columns: 14.8rem 1fr;
  align-items: center;
  gap: var(--el-gap);
  color: white;
}
.practice_process ul li span {
  max-width: 14.8rem;
  text-align: center;
  place-content: center;
  border-radius: 1.5rem;
  height: 6.3rem;
  padding-block: 0.5rem;
  line-height: 1.1;
}
.practice_process ul li[data-value="lasers"] span {
  background-color: var(--lasers);
}
.practice_process ul li[data-value="procedural_pharmaceuticals"] span {
  background-color: var(--procedural_pharmaceuticals);
}
.practice_process ul li[data-value="tissue_sparing_migs"] span {
  background-color: var(--tissue_sparing_migs);
}
.practice_process ul li[data-value="mtmt"] span {
  background-color: var(--mtmt);
}
.practice_process ul li[data-value="non_tissue_sparing_migs_procedures"] span {
  background-color: var(--non_tissue_sparing_migs_procedures);
}
.practice_process ul li[data-value="filtering_surgery"] span {
  background-color: var(--filtering_surgery);
}
.layout-simple-content .container .practice_process ul > li + li {
  margin-block-start: 0;
}
@container practice-process (inline-size < 515px) {
  .wrapper .container ul.practice_process {
    padding-inline: 1rem; 
  }
  .practice_process ul {
    flex-direction: column;
  }
  .practice_process ul li {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .practice_process ul li:not(:last-of-type) {
    grid-template-rows: 1fr 1fr;
  }
  .practice_process h3 {
    display: block;
    text-align: center;
  }
  .practice_process li:nth-last-of-type(2) h3 {
    display: inline;
  }
  .practice_process ul li span {
    width: min(25.8rem, 100%);
    max-width: 100%;
  }
  .practice_process ul li svg {
    transform: rotate(90deg);
  }
}
video-container {
  --flow-space: 8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "video text";
  column-gap: 5rem;
  max-width: 95%;
  margin-inline: auto;
}
video-container hgroup {
  grid-area: text;
}
video-container hgroup h2,
video-container hgroup p {
  text-align: left;
}
video-container vimeo-video {
  grid-area: video;
}
video-container vimeo-video iframe {
  border-radius: 1rem;
}
@container practice-process (inline-size < 1009px) {
  video-container {
    --flow-space: 3rem;
    grid-template-columns: 1fr;
    grid-template-areas: 
      "video"
      "text";
    row-gap: 2rem;
    max-width: 100%;
  }
}

/* CTA */
.layout-cta-column {
  container: cta-column / inline-size;
}
.page-glaucoma .layout-cta-column .wrapper {
  padding-block-start: 0;
}
@container cta-column (inline-size < 450px) {
  .wrapper .content.flex.flow {
    padding-inline: 1rem;
  }
}

/* Contact Us */
.layout-contact-us {
  container: contact-us / inline-size;
}
.layout-contact-us h2 {
  text-align: left;
}
.layout-contact-us .form {
  margin-block-end: var(--layout-reference-padding);
}
.layout-contact-us a.btn {
  max-width: 24rem;
  max-height: 11.8rem;
  background-color: var(--teal);
  color: white;
  display: block;
  place-content: center;
}
.layout-contact-us .text--grey {
  height: 100%;
}
.layout-contact-us .text--grey p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "btn1 btn2"
    "img img"
    "warning warning";
  gap: 2rem;
  height: 100%;;
}
.layout-contact-us .text--grey p a:nth-of-type(1) {
  grid-area: btn1;
}
.layout-contact-us .text--grey p a:nth-of-type(2) {
  grid-area: btn2;
}
.layout-contact-us .text--grey p img {
  grid-area: img;
}
.layout-contact-us .text--grey p small {
  grid-area: warning;
  align-self: end;
}
@container contact-us (inline-size < 450px) {
  .layout-contact-us .text--grey p {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "btn1"
      "btn2"
      "img"
      "warning";
  }
  .layout-contact-us a.btn {
    margin-inline: auto;
    width: calc(min(240px, 100%));
    height: 9.2rem;
  }
}

/* Reference */
div.layout-references {
  margin-block-start: 0;
}
.reference__content {
  font-style: italic;
}

/* reset isi popup */
#isiButtonClose img {
  width: unset;
}
.isi-content h2,
.isi-content h3 {
  text-align: left;
}