/* ==========================================================================
   Page Common Components
   Shared across prototype detail / detail2 / benefits pages
   ========================================================================== */

/* === Site Header === */
.s26-site-header {
  background: var(--color-bg-page);
  padding: var(--space-md) 0;
}
.s26-site-header__pc { display: block; }
.s26-site-header__sp { display: none; }
.s26-site-header__image {
  max-width: 1248px;
  width: 100%;
  height: auto;
}
.s26-site-header__sp-image {
  display: block;
  width: 100%;
  height: auto;
}
.s26-site-header__sp-inner {
  display: flex;
  align-items: center;
  height: 56px;
}
.s26-site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.s26-site-logo img { height: 32px; width: auto; }

/* === Breadcrumb === */
.s26-breadcrumb {
  padding: var(--space-sm) 0;
  font-size: var(--body-xs-size);
  color: var(--color-text-subtle);
}
.s26-breadcrumb a { color: var(--color-text-subtle); text-decoration: none; }
.s26-breadcrumb a:hover { text-decoration: underline; }
.s26-breadcrumb span { margin: 0 var(--space-xs); }

/* === Hero === */
.s26-hero {
  background: var(--color-bg-page);
  padding: var(--space-2xl) 0 0;
}
.s26-hero__card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  min-height: 375px;
  display: flex;
  align-items: stretch;
  gap: var(--space-2xl);
}
.s26-hero__picto-wrap {
  display: flex;
  align-items: center;
}
.s26-hero__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.s26-hero__picto {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  margin-right: var(--space-3xl);
}
.s26-hero__title {
  line-height: var(--heading-lg-leading);
  margin-bottom: var(--space-md);
}
.s26-hero__rule {
  width: 40px;
  height: 2px;
  background: var(--color-brand-primary);
  margin-bottom: var(--space-md);
}
.s26-hero__intro {
  color: var(--color-text-default-sub);
  line-height: var(--leading-body-md-plus-loose);
}

/* === Page Header (simple heading + divider) === */
.s26-page-header {}
.s26-page-header__body {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  position: relative;
}
.s26-page-header__body::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border-default);
}
.s26-page-header__title {
  line-height: var(--heading-lg-leading);
  margin-bottom: var(--space-md);
}
.s26-page-header__intro {
  color: var(--color-text-subtle);
  line-height: var(--leading-body-md-plus-loose);
}

/* === Static Content Wrapper === */
.s26-static-content {}

/* === Content Section === */
.s26-content-section { padding: var(--space-5xl) 0; }
.s26-content-section--alt { background: var(--color-bg-accent); }
.s26-content-section--bordered { border-bottom: 1px solid var(--color-border-default); }
.s26-content-section--compact { padding: var(--space-2xl) 0; }
.s26-section-header {
  text-align: left;
  margin-bottom: var(--space-2xl);
}
.s26-section-header p {
  color: var(--color-text-default-sub);
  margin-top: var(--space-sm);
  line-height: var(--leading-body-md-plus-loose);
}
.s26-section-header--compact { margin-bottom: var(--space-xl); }
.s26-section-note {
  text-align: left;
  margin-top: var(--space-xl);
  color: var(--color-text-default-sub);
}

/* === Info Box === */
.s26-info-box {
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.s26-info-box:last-child { margin-bottom: 0; }
.s26-info-box__title {
  margin-bottom: var(--space-md);
  color: var(--color-brand-primary);
}
.s26-info-box__list {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-md);
  list-style: disc;
}
.s26-info-box__list li {
  margin-bottom: var(--space-4xs);
  color: var(--color-text-default);
  line-height: var(--body-sm-leading);
  list-style: disc;
  margin-left: 0;
}
.s26-info-box__content p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-default-sub);
  line-height: var(--leading-body-md-plus-loose);
}

/* === Contact Box === */
.s26-contact-box {
  background: var(--color-bg-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  text-align: center;
  margin-top: var(--space-xl);
}
.s26-contact-box__title { margin-bottom: var(--space-md); }
.s26-contact-box__phone {
  font-size: var(--heading-md-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.s26-contact-box__hours {
  color: var(--color-text-subtle);
  font-size: var(--body-sm-size);
}

/* === Related Benefits === */
.s26-related-benefits { padding: var(--space-5xl) 0; }
.s26-related-benefits__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.s26-related-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.s26-related-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--color-bg-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.s26-related-card:hover {
  background: var(--color-border-default);
}
.s26-related-card__icon { flex-shrink: 0; width: 56px; height: 56px; }
.s26-related-card__icon :is(img, svg) { width: 100%; height: 100%; }
.s26-related-card__body { flex: 1; }
.s26-related-card__title {
  color: var(--color-text-default);
  margin-bottom: var(--space-3xs);
}
.s26-related-card__desc { color: var(--color-text-default-sub); line-height: var(--leading-body-md-plus-loose); }
.s26-related-card__arrow {
  flex-shrink: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 0;
  background: var(--color-text-subtle);
  -webkit-mask-image: url(/img/ds/arrow-right.png);
  mask-image: url(/img/ds/arrow-right.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* === Coupon Section === */
.s26-coupon-section {
  background: var(--color-bg-accent);
  padding: var(--space-5xl) 0;
  text-align: center;
}
.s26-coupon-section__badge {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-gray-7);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--label-sm-size);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}
.s26-coupon-section__title {
  color: var(--color-text-default);
  margin-bottom: var(--space-lg);
}
.s26-coupon-section__emphasis {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}
.s26-coupon-section__value {
  font-size: var(--text-7xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-sm);
}
.s26-coupon-section__value span { font-size: var(--heading-sm-size); }
.s26-coupon-section__present { color: var(--color-text-default); }
.s26-coupon-section__desc {
  color: var(--color-text-default-sub);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}
.s26-coupon-section__cta { margin-top: var(--space-lg); }

/* === Buttons === */
.s26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-2xl);
  border-radius: var(--radius-sm);
  font-size: var(--label-md-size);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
  border: none;
}
.s26-btn:hover { opacity: 0.85; }
.s26-btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-default-on-dark);
}
.s26-btn--large {
  padding: var(--space-md) var(--space-3xl);
  font-size: var(--label-lg-size);
}

/* === Placeholder === */
.s26-placeholder {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.s26-placeholder--picto {
  width: 48px;
  height: 48px;
}
.s26-placeholder--picto img {
  width: 40px;
  height: 40px;
}

/* === Site Footer === */
.s26-site-footer {
  background: var(--color-gray-20);
  color: var(--color-text-default-on-dark);
  padding: var(--space-2xl) 0;
}
.s26-site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.s26-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}
.s26-site-footer__links a {
  color: var(--color-gray-60);
  text-decoration: none;
  font-size: var(--body-xs-size);
}
.s26-site-footer__links a:hover { color: var(--color-white); }
.s26-site-footer__copyright {
  font-size: var(--caption-sm-size);
  color: var(--color-gray-60);
}

/* === WF Prototype Utilities === */
.s26-wf-back-link {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1001;
  background: var(--color-blue);
  color: var(--color-text-default-on-dark);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--label-xs-size);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.s26-wf-back-link:link,
.s26-wf-back-link:visited { color: var(--color-text-default-on-dark); }
.s26-wf-back-link:hover { opacity: 0.85; }
.s26-wf-annotation {
  position: fixed;
  top: 48px;
  right: var(--space-sm);
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--label-xs-size);
  font-weight: var(--font-weight-bold);
  z-index: 1000;
}

/* === Mobile Overrides === */
@media (max-width: 767px) {
  .s26-site-header { padding: 0; }
  .s26-site-header__pc { display: none; }
  .s26-site-header__sp { display: block; }
  .s26-hero { padding: var(--space-2xl) 0; }
  .s26-hero__card { flex-direction: column; padding: var(--space-2xl) var(--space-xl); }
  .s26-hero__picto { width: 64px; height: 64px; }
  .s26-hero__picto-wrap { order: -1; }
  .s26-hero__intro { max-width: none; }
  .s26-page-header__body {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-xl);
    padding-inline: calc(var(--margin-x-large) - var(--margin-x));
  }
  .s26-page-header__body::after {
    left: calc(var(--margin-x-large) - var(--margin-x));
    right: calc(var(--margin-x-large) - var(--margin-x));
  }
  .s26-content-section { padding: var(--space-2xl) 0; }
  .s26-section-header { margin-bottom: var(--space-xl); }
  .s26-content-section .s26-section-header,
  .s26-content-section .s26-section-note {
    padding-inline: calc(var(--margin-x-large) - var(--margin-x));
  }
  .s26-info-box { padding: var(--space-xl) calc(var(--margin-x-large) - var(--margin-x)); }
  .s26-contact-box { padding: var(--space-lg); margin-top: var(--space-lg); }
  .s26-related-benefits { padding: var(--space-2xl) 0; }
  .s26-related-benefits__header { margin-bottom: var(--space-xl); }
  .s26-related-benefits__grid { grid-template-columns: 1fr; gap: var(--margin-x); }
  .s26-related-card { padding: var(--space-lg); gap: var(--space-md); }
  .s26-coupon-section { padding: var(--space-2xl) 0; }
  .s26-coupon-section__value { font-size: var(--text-5xl); }
  .s26-site-footer { padding: var(--space-lg) 0; }
}