/* //////////////////////////////////////////////////////////////////////////

   CSS Part III

   //////////////////////////////////////////////////////////////////////////

   I. Custom pages
   |
   ├─ 1.Layout
   ├─ 2.Custom
   ├─ 3.Signup
   └─ 4.Contact

   //////////////////////////////////////////////////////////////////////////

   I. Custom pages

   ////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------------
   1.Layout
   -------------------------------------------------------------------------- */
.l-custom {
   --v-width-column-img: 340px;
   grid-template-columns: 1fr var(--v-width-column-img);
   gap: 0;
   min-height: 100svh;
}

.l-custom--content {
   display: grid;
   align-items: center;
   grid-template-rows: auto 1fr;
   grid-column: 1/-1;
   margin-bottom: calc(var(--gap-grid) / 1.4);
   padding-top: var(--padding-site-top);
   padding-right: var(--gap-site);
   padding-left: var(--gap-site);
}

.l-custom--container {
   justify-self: center;
   gap: calc(var(--gap-grid) / 2);
   max-width: clamp(400px, 50vw, 740px);
}

.l-custom--main {
   align-items: center;
   align-self: stretch;
}

/* RWD — Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .l-custom {
      grid-template-columns: 1fr;
   }
}

/* --------------------------------------------------------------------------
   2.Custom
   -------------------------------------------------------------------------- */
.custom-btn {
   justify-self: start;
   padding: .4em 2em;
}

/* Image */
.custom-img {
   --v-inset: 25px;
   position: fixed;
   inset: var(--v-inset) var(--v-inset) var(--v-inset) auto;
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   width: calc(var(--v-width-column-img) - var(--v-inset));
}

.custom-img picture {
   overflow: hidden;
   border-radius: var(--radius-small);
}

.custom-img figcaption {
   text-align: right;
}

/* RWD — Custom
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .custom-img {
      display: none;
   }
}

@media (max-width:480px) {
   .custom-btn {
      width: 100%;
   }
}

@media (min-width:769px) {
   .l-custom:has(> .custom-img) .l-custom--content {
      grid-column: 1;
   }
}

/* --------------------------------------------------------------------------
   3.Signup
   -------------------------------------------------------------------------- */
.signup-btns {
   gap: calc(var(--gap-mini) / 1.4);
}

.signup-benefits {
   columns: 240px 2;
   column-gap: max(20px, 2vw);
   text-align: left;
}

.signup-benefits li {
   display: flex;
   align-items: start;
   gap: .3em;
   padding-bottom: .4em;
   break-inside: avoid-column;
}

.signup-benefits li::before {
   font-family: var(--font-family-system);
   font-size: 90%;
   line-height: 1;
   content: '✓';
   flex-shrink: 0;
   margin-top: .2em;
}

/* RWD — Signup
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .signup-btns {
      display: grid;
   }
}

/* --------------------------------------------------------------------------
   4.Contact
   -------------------------------------------------------------------------- */
.contact-form {
   gap: calc(var(--gap-grid) / 2);
}

.contact-form input,
.contact-form textarea {
   font-size: var(--font-size-input);
   width: 100%;
   padding: 1.2em 1.6em;
   transition: background-color .16s ease;
}

.contact-form input {
   border-radius: var(--radius-full);
}

.contact-form input + input {
   margin-top: calc(var(--gap-mini) / 1.5);
}

.contact-form textarea {
   min-height: 120px;
   border-radius: var(--radius-medium);
}

.contact-form input:hover,
.contact-form input:focus,
.contact-form textarea:hover,
.contact-form textarea:focus {
   background-color: var(--color-three);
}