/* Tokens */
:root {

   --spacing-root: 0.625rem;
   --indent: .75rem;

   --font-size-base: 1rem;
   --font-size-xs: calc(var(--font-size-base) * .75);
   --font-size-sm: calc(var(--font-size-base) * .875);

   --tint-intensity: .8;
   --tint-purple: oklch(0.3735 0.111 383.3 / var(--tint-intensity));
   --tint-red: oklch(0.3912 0.121 31.11 / var(--tint-intensity));
   --tint-orange: oklch(0.6588 0.089 62.0855 / var(--tint-intensity));
   --tint-yellow: oklch(0.7294 0.159 84.64 / var(--tint-intensity));

   --purple: #91435F;
   --red: #BC5149;
   --orange: #DA834E;
   --yellow: #EFB652;
   --blue: #80A6A4;

   --bg-color: #EDE7D8;

   --logo-color: #393432;

   --number-of-lines: 4;
   --line-width: var(--spacing-root);
   --radius: 80px;


   --section-min-height: calc(var(--radius) + (var(--line-width) * var(--number-of-lines)));

   --step-1: var(--line-width);
   --step-2: calc(var(--line-width) * 2);
   --step-3: calc(var(--line-width) * 3);
   --step-4: calc(var(--line-width) * 4);




   --bg: transparent;

   /* Reusable gradient color stops - now with 4 stripes */
    --radial-stops-forward:

       var(--bg) var(--radius),
       var(--yellow) var(--radius),
       var(--yellow) calc(var(--radius) + var(--step-1)),
       var(--orange) calc(var(--radius) + var(--step-1)),
       var(--orange) calc(var(--radius) + var(--step-2)),
       var(--red) calc(var(--radius) + var(--step-2)),
       var(--red) calc(var(--radius) + var(--step-3)),
       var(--purple) calc(var(--radius) + var(--step-3)),
       var(--purple) calc(var(--radius) + var(--step-4)),
       var(--bg) calc(var(--radius) + var(--step-4)),
       var(--bg) calc(var(--radius) + var(--step-4));

   --radial-stops-reverse:
       var(--bg) var(--radius),
       var(--purple) var(--radius),
       var(--purple) calc(var(--radius) + var(--step-1)),
       var(--red) calc(var(--radius) + var(--step-1)),
       var(--red) calc(var(--radius) + var(--step-2)),
       var(--orange) calc(var(--radius) + var(--step-2)),
       var(--orange) calc(var(--radius) + var(--step-3)),
       var(--yellow) calc(var(--radius) + var(--step-3)),
       var(--yellow) calc(var(--radius) + var(--step-4)),
       var(--bg) calc(var(--radius) + var(--step-4));

   --gradient-stops-forward:
       var(--yellow) var(--step-1),
       var(--orange) var(--step-1),
       var(--orange) var(--step-2),
       var(--red) var(--step-2),
       var(--red) var(--step-3),
       var(--purple) var(--step-3),
       var(--purple) var(--step-4),
       var(--bg) var(--step-4);

   --gradient-stops-reverse:
       var(--purple) var(--step-1),
       var(--red) var(--step-1),
       var(--red) var(--step-2),
       var(--orange) var(--step-2),
       var(--orange) var(--step-3),
       var(--yellow) var(--step-3),
       var(--yellow) var(--step-4),
       var(--bg) var(--step-4);
 }


 @font-face {
   font-family: "KarimunRegular";
   src: url('/fonts/karium-regular.woff2') format('woff2'), url('/fonts/karium-regular.woff') format('woff');
 }



* {
   box-sizing: border-box;
   min-width: 0;
}

::selection {
   background-color: var(--purple);
   color: var(--bg-color);
}

body {
   margin: 0;
   padding: 0;
   min-height: 100dvh;
   font-family: sans-serif;


   background-color: var(--bg-color);

   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;

   text-rendering: optimizeLegibility;
   font-smooth: always;


}




h1, h2, h3 {
   font-family: 'KarimunRegular', serif;
   font-weight: normal;
   text-wrap: balance;

   text-box-edge: cap alphabetic;
   text-box-trim: trim-both;
}

p {
   text-wrap: pretty;
   line-height: 1.4;

   &:last-child {
      margin-bottom: 0;
   }
}

h2 {
   font-size: clamp(2rem, 16cqw, 4rem);
   line-height: .5;
   text-indent: calc(var(--indent) * -.75);
   margin-inline: 0;
   margin-block: 0;

   word-spacing: -.25rem;

   .amp {
      margin-inline: -.75rem -.25rem;
      font-style: italic;
   }
}

h3 {
   font-size: clamp(1.5rem, 14cqw, 2rem);
   margin-block: 0;
}

.container {
   margin: 0 auto;
   padding: 0;
   width: clamp(393px, 100dvw, 440px);


   box-shadow: 0 0 30px oklch(from var(--purple) calc(l - .25) c h / 0.43);
}

#site-logo {
   fill: var(--logo-color);
   width: 90%;
   height: auto;
}


/* Home Page Header */
header {
   position: relative;
   padding: 0;
   height: 630px;
   margin-bottom: calc(var(--radius) * -2);

   h1 {
      position: absolute;
      bottom: 6rem;
      margin: 0;
      left: calc(var(--step-4) + var(--step-2));
      z-index: 1;
      padding: 0;
   }


   picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;


      mask-image: url(img/mask-mobile.webp);
      mask-size: 440px;
      mask-position: center -4rem;
      mask-repeat: no-repeat;

      background: linear-gradient(to top, var(--tint-purple) 50%, var(--tint-red), var(--tint-orange) 80%, var(--tint-yellow));

      img {
         height: 100%;
         width: 100%;

         mix-blend-mode: overlay;

         object-fit: cover;
      }
   }


   &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      mask-image: linear-gradient(to bottom, transparent 66%, black);
      mask-size: var(--step-4) calc(100% - (var(--radius) * 2));
      mask-position: left top;
      mask-repeat: no-repeat;

      background: linear-gradient(to right, var(--gradient-stops-forward)) top left / 100% 100% no-repeat;
   }


}



section {
   min-height: var(--section-min-height);
   margin: 0;



   padding-bottom: calc(var(--radius) * -1);
   padding-left: calc(var(--step-4) + var(--step-3));
   padding-right: calc(var(--step-4) + var(--step-1));


   /* rules for everything but the first child */
   &:not(:first-child) {
      padding-top: calc(var(--step-1) + var(--radius) * 2);
      margin-top: calc((var(--radius) / 2) * -1);
   }

   &:nth-child(1n) { h2 { color: var(--purple)} }
   &:nth-child(2n) { h2 { color: var(--red)} }
   &:nth-child(3n) { h2 { color: var(--orange)} }
   &:nth-child(4n) { h2 { color: var(--yellow)} }
   &:nth-child(5n) { h2 { color: var(--blue)} }
}

/* First child and last child (if even) */
section:first-child,
section:last-child:nth-child(even) {

  /*background:
    linear-gradient(to right, var(--gradient-stops-forward))
    top left / 100% 100% no-repeat;*/
}

/* Last child (if odd) */
/*section:last-child:nth-child(odd) {
  background:
    linear-gradient(to left, var(--gradient-stops-reverse))
    top left / 100% 100% no-repeat;
}*/

section:first-child {
   padding-top: calc(var(--radius) * 2);
}


/* Odd children (except first and last) */
section:nth-child(even):not(:first-child) {
   padding-right: calc(var(--step-1));
   background:
    radial-gradient(circle at top left, var(--radial-stops-forward))
    top right / calc(var(--radius) + var(--step-4)) calc(var(--radius) + var(--step-4)) no-repeat,

    radial-gradient(circle at bottom right, var(--radial-stops-reverse))
    top var(--radius) left / calc(var(--radius) + var(--step-4)) calc(var(--radius) + var(--step-4)) no-repeat,

    linear-gradient(to right, var(--gradient-stops-forward))
    top calc(var(--step-4) + (var(--radius) * 2)) left / 100% calc(100% - (var(--radius) * 3)) no-repeat,

    linear-gradient(to bottom, var(--gradient-stops-forward))
    top var(--radius) left calc(var(--radius) + var(--step-4)) / calc(100% - (var(--radius) * 3)) 100% no-repeat;
}

/* Even children */
section:nth-child(odd) {
   padding-left: var(--step-3);
  background:
    radial-gradient(circle at bottom left, var(--radial-stops-forward))
    top var(--radius) right / calc(var(--radius) + var(--step-4)) calc(var(--radius) + var(--step-4)) no-repeat,

    radial-gradient(circle at top right, var(--radial-stops-reverse))
    top left / calc(var(--radius) + var(--step-4)) calc(var(--radius) + var(--step-4)) no-repeat,

    linear-gradient(to bottom, var(--gradient-stops-reverse))
    top var(--radius) left calc(var(--radius) + var(--step-4)) / calc(100% - (var(--radius) * 3)) 100% no-repeat,

    linear-gradient(to left, var(--gradient-stops-reverse))
    top calc(var(--step-4) + (var(--radius) * 2)) left / 100% 100% no-repeat ;


}


section:last-child {
   padding-bottom: calc(var(--step-1) + var(--radius) * 2);
   padding-right: var(--step-1);


   mask-image:
      linear-gradient(to bottom, black, black),
      linear-gradient(to bottom, black 10%, rgba(0,0,0,0.3) 20%, transparent);

   mask-size: calc(100% - var(--step-4)) 100%, var(--step-4) 100%;
   mask-repeat: no-repeat;

   &:nth-child(odd) {
      mask-position: top left, top right;

   }
   &:nth-child(even) {
      mask-position: top right, top left;

   }

}


.upcoming-class-list {
   list-style-type: none;
   padding: 0;
   margin-right: 30px;

   display: flex;
   flex-direction: column;
   gap: var(--step-1);



   li:nth-child(1n) { --key-color: oklch(from var(--purple) calc(l + 0.1) c h); }
   li:nth-child(2n) { --key-color: var(--red); }
   li:nth-child(3n) { --key-color: var(--orange); }
   li:nth-child(4n) { --key-color: var(--yellow); }
   li:nth-child(5n) { --key-color: var(--blue); }



   li {

      gap: var(--step-1);
      border-radius: var(--step-2);
      padding: var(--step-1) var(--step-1) 0 var(--step-1);
      color: oklch(from var(--key-color) calc(l - 0.4) c h);
      background-color: var(--key-color);
      margin-right: var(--step-2);
      margin-left: calc(var(--step-1) * -1);

      h4 {
         margin: var(--step-1) 0 var(--step-1) 5px;
         padding: 0;
         font-size: 17px;
      }
   }


   .class-schedule {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto;

     margin-bottom: var(--step-1);
     background-color: oklch(from var(--key-color) calc(l + 0.035) calc(c - .01) h / 1);
     padding: var(--step-1);
     border-radius: var(--step-1);


     .time {
        grid-column: 1;
        display: block;
        font-size: 15px;
        font-weight: 500;


     }

     time {
        display: block;
        }

     button {
        align-self: top;
        grid-column: 2;
     }
   }


   .button {
      font-size: 14px;
      font-weight: bold;
      padding: var(--step-1);
      border-radius: var(--step-1);
      height: fit-content;

      color: oklch(from var(--key-color) calc(l + 0.1) calc(c + .075) h / 1);
      text-decoration: none;
      background-color: oklch(from var(--key-color) calc(l - 0.095) calc(c - .01) h / 1);


   }

}


footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: var(--blue);
   padding: var(--step-1);

   font-size: 10px;

   .button {
      font-size: 24px;
      font-weight: bold;
      width: 80%;
      margin: var(--step-2);
      padding: var(--step-2);
      text-align: center;
      border-radius: var(--step-4);
      height: fit-content;

      color: oklch(from var(--blue) calc(l + 0.1) calc(c + .075) h / 1);
      text-decoration: none;
      background-color: oklch(from var(--blue) calc(l - 0.095) calc(c - .01) h / 1);


   }
}