/* ======================================================
//  MARK: Access Section
//
//  Fluid clamp() values calculated for:
//    Mobile (400px viewport) -> PC (1440px viewport)
//    slope = (max_px - min_px) / 1040
//    intercept = min_px - slope * 400
// ====================================================== */

@layer components {
  @scope (.access) {
    :scope {
      container-type: inline-size;
      background-color: var(--wp--preset--color--base);
      padding-block: clamp(4rem, 3.615rem + 1.538cqi, 5rem);
      padding-inline: clamp(1.5rem, 0.154rem + 5.385cqi, 5rem);
    }

    /* -- Inner wrapper (layout container) -- */
    .access__inner {
      display: flex;
      flex-direction: column;
      gap: clamp(2rem, 1.615rem + 1.538cqi, 3rem);
    }

    @container (inline-size > 48rem) {
      .access__inner {
        flex-direction: row;
        align-items: center;
      }
    }

    /* -- Map -- */
    .access__map {
      inline-size: 100%;
      aspect-ratio: 44 / 35;
      border-radius: 0.625rem;
      overflow: hidden;
      flex-shrink: 0;
    }

    .access__map iframe {
      inline-size: 100%;
      block-size: 100%;
      border: 0;
      display: block;
    }

    @container (inline-size > 48rem) {
      .access__map {
        inline-size: 50%;
        aspect-ratio: 63 / 50;
      }
    }

    /* -- Detail (info + button wrapper) -- */
    .access__detail {
      display: flex;
      flex-direction: column;
      gap: clamp(1.5rem, 2.192rem - 0.769cqi, 2rem);
      flex: 1;
      min-inline-size: 0;
    }

    /* -- Info items list -- */
    .access__info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* -- Each info item -- */
    .access__item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    @container (inline-size > 48rem) {
      .access__item {
        flex-direction: row;
        align-items: flex-start;
      }
    }

    /* -- Label badge -- */
    .access__label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding-block: 0.375rem;
      padding-inline: 0.75rem;
      background-color: var(--wp--custom--color--info-label-bg);
      border-radius: 0.3125rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--wp--custom--color--info-label-text);
      line-height: normal;
      white-space: nowrap;
      flex-shrink: 0;
    }

    @container (inline-size > 48rem) {
      .access__label {
        inline-size: 6.25rem;
        padding-inline: 0;
      }
    }

    /* -- Value text -- */
    .access__value {
      margin-block: 0;
      font-size: 1rem;
      font-weight: 400;
      color: var(--wp--custom--color--text-body);
      line-height: 1.8;
    }

    /* -- CTA Button -- */
    .access__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      max-inline-size: 410px;
      block-size: 4.375rem;
      background-color: var(--wp--custom--color--brand);
      border-radius: 100vmax;
      font-size: clamp(1.125rem, 1.077rem + 0.192cqi, 1.25rem);
      font-weight: 700;
      color: var(--wp--preset--color--base);
      text-decoration: none;
    }

    @media (any-hover: hover) {
      .access__btn:hover {
        opacity: 0.85;
      }
    }
  }
}

/* ======================================================
//  MARK: WP unlayered link override
// ====================================================== */

.access .access__btn {
  text-decoration: none;
}