/*-----------------------------------*\
  #UTILITIES.CSS
\*-----------------------------------*/

/* Layout */
.container { padding-inline: 16px; }

.section {
  position: relative;
  padding-block: var(--section-space);
  overflow: hidden;
  z-index: 1;
}

.grid-list {
  display: grid;
  gap: 40px;
}

.bg-black-10 { background-color: var(--smoky-black-2); }

.has-bg-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.w-100    { width: 100%; }
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  overflow: hidden;
  background-color: var(--eerie-black-4);
}

/* Pseudo-element helpers */
.has-before,
.has-after {
  position: relative;
  z-index: 1;
}
.has-before::before,
.has-after::after { content: ""; position: absolute; }

/* Separator diamond */
.separator {
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold-crayola);
  transform: rotate(45deg);
}

/* Contact */
.contact-label  { font-weight: var(--weight-bold); }
.contact-number {
  color: var(--gold-crayola);
  max-width: max-content;
  margin-inline: auto;
}
.contact-number::after { bottom: -5px; }

/* Section subtitle */
.section-subtitle {
  position: relative;
  color: var(--gold-crayola);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-2);
  margin-block-end: 12px;
}
.section-subtitle::after {
  content: url('../assets/images/separator.svg');
  display: block;
  width: 100px;
  margin-inline: auto;
  margin-block-start: 5px;
}

/* Hover underline */
.hover-underline {
  position: relative;
  max-width: max-content;
}
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  border-block: 1px solid var(--gold-crayola);
  transform: scaleX(0.2);
  opacity: 0;
  transition: var(--transition-2);
}
.hover-underline:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Shine overlay on hover */
.hover\:shine { position: relative; }
.hover\:shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: linear-gradient(to right, transparent 0%, #fff6 100%);
  transform: skewX(-0.08turn) translateX(-180%);
}
.hover\:shine:is(:hover, :focus-within)::after {
  transform: skewX(-0.08turn) translateX(275%);
  transition: var(--transition-3);
}

/* Shape (decorative) */
.shape {
  display: none;
  position: absolute;
  max-width: max-content;
  z-index: -1;
}

/* Floating animation */
.move-anim { animation: move 5s linear infinite; }
@keyframes move {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(30px); }
}

/* Rotation */
@keyframes rotate360 {
  0%   { transform: rotate(0); }
  100% { transform: rotate(1turn); }
}

/* Input fields */
.input-field {
  background-color: var(--eerie-black-2);
  color: var(--white);
  height: 56px;
  padding: 10px 20px;
  border: 1px solid var(--white-alpha-10);
  margin-block-end: 20px;
  outline: none;
  transition: border-color var(--transition-2);
}
.input-field::placeholder { color: inherit; }
.input-field:focus        { border-color: var(--gold-crayola); }

.icon-wrapper { position: relative; margin-block-end: 20px; }
.icon-wrapper .input-field {
  margin-block-end: 0;
  padding-inline-start: 40px;
  appearance: none;
  cursor: pointer;
}
.icon-wrapper ion-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  --ionicon-stroke-width: 50px;
  pointer-events: none;
}
.icon-wrapper ion-icon:first-child { left: 15px; }
.icon-wrapper ion-icon:last-child  { right: 10px; }

textarea.input-field {
  resize: none;
  height: 140px;
  padding-block: 20px;
  line-height: var(--lineHeight-1);
}

/* Button text link */
.btn-text {
  color: var(--gold-crayola);
  padding-block-end: 4px;
  margin-inline: auto;
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-3);
  font-weight: var(--weight-bold);
  transition: var(--transition-1);
}
.btn-text:is(:hover, :focus-visible) { color: var(--white); }