/*
 * @file: Source\themes\blocksy-child\assets\css\photocka-hero-cta.css
 * @version: 1.0.16
 * @updated: 2026-03-22 15:15:15
 * @size: 46630
 */
/* =========================================================

   ФОТОЧКА — HERO + CTA COMPONENTS
   Этот файл отвечает только за:
   • Hero
   • кнопки Hero
   • строку фактов Hero
   • правую колонку Hero Image System
   • ActionMenu внутри Hero
   • CTA section
   • CTA cards
   Этот файл опирается на:
   • photocka-variables.css
   • photocka-styles.css
   • photocka-icons.css
   • photocka-motion.css
   
   
   
   ========================================================= */


/* =========================================================
   1. HERO — КОНТЕЙНЕР И ТЕМЫ
   ========================================================= */




.phc-hero {
  position: relative;
  overflow: visible;
  min-block-size: var(--phc-hero-height-min);
}

.phc-hero.phc-hero--theme-yellow {
  background-image: url('/wp-content/themes/blocksy-child/assets/images/hero/hero-fon-fotochka-teplyy-zheltyy-gradient.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--phc-text-on-yellow);
}

.phc-hero--theme-yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--phc-bg-cream);
  opacity: 0.40;
  pointer-events: none;
  z-index: 0;
}

.phc-hero.phc-hero--theme-blue {
  background: var(--phc-hero-bg-blue);
  color: var(--phc-text-on-dark);
}

.phc-hero.phc-hero--theme-cream {
  background: var(--phc-hero-bg-cream);
  color: var(--phc-text-on-cream);
}

.phc-hero.phc-hero--theme-graphite {
  background: var(--phc-bg-graphite);
  color: var(--phc-text-on-dark);
}


/* =========================================================
   2. HERO — СЕТКА И КОЛОНКИ
   ========================================================= */

.phc-hero__inner {
  padding-inline: var(--phc-space-3);
  display: grid;
  grid-template-columns: minmax(var(--phc-num-0), 1.2fr) minmax(var(--phc-num-0), 0.8fr);
  gap: var(--phc-hero-grid-gap);
  align-items: center;
  min-block-size: var(--phc-hero-height-desktop);
  position: relative;
  z-index: 1;  
}



.phc-hero__inner,
.phc-hero__content,
.phc-hero__media {
  position: relative;
  z-index: 1;
}

.phc-hero--content-only .phc-hero__inner,
.phc-hero--no-image .phc-hero__inner {
  grid-template-columns: minmax(var(--phc-num-0), var(--phc-num-1));
  min-block-size: auto;
}

.phc-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--phc-hero-content-gap);
  inline-size: var(--phc-percent-100);
  max-inline-size: none; 
  position: relative;
  z-index: 1;  
}

.phc-hero--content-only .phc-hero__content,
.phc-hero--no-image .phc-hero__content {
  max-inline-size: var(--phc-hero-content-max-no-image);
}


/* =========================================================
   3. HERO — ТЕКСТОВЫЙ БЛОК
   ========================================================= */

.phc-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--phc-space-2);
}

.phc-hero__title {
  margin-block-start: var(--phc-space-2);
  margin-block-end: var(--phc-space-3);  
  font-size: var(--phc-font-size-4xl);
  line-height: var(--phc-line-height-tight);
  font-weight: var(--phc-font-weight-bold);
  font-family: var(--phc-font-family-heading);
  text-wrap: balance;
}

.phc-hero__subtitle {
  font-size: var(--phc-font-size-xl);
  font-weight: var(--phc-font-weight-semibold);
  line-height: var(--phc-line-height-base);
  margin-block-start: var(--phc-space-3);
  margin-block-end: var(--phc-space-2);
  max-inline-size: none;
}

.phc-hero__text {
  display: flex;
  flex-direction: column;
  font-size: var(--phc-font-size-xl);  
  gap: var(--phc-space-2);
  max-inline-size: none;
}

.phc-hero__description {
  margin: var(--phc-num-0);
  font-size: var(--phc-font-size-base);
  line-height: var(--phc-line-height-tight);
}


/* =========================================================
   4. HERO — КОРРЕКЦИЯ ТЕКСТА ПО ТЕМАМ
   ========================================================= */

.phc-hero--theme-yellow .phc-hero__subtitle,
.phc-hero--theme-cream .phc-hero__subtitle,
.phc-hero--theme-yellow .phc-hero__description,
.phc-hero--theme-cream .phc-hero__description {
  color: var(--phc-text-secondary);
}

.phc-hero--theme-blue .phc-hero__subtitle,
.phc-hero--theme-graphite .phc-hero__subtitle {
  color: var(--phc-text-on-dark-muted);
}

.phc-hero--theme-blue .phc-hero__description,
.phc-hero--theme-graphite .phc-hero__description {
  color: var(--phc-text-on-dark);
}

/* =========================================================
5. HERO — КНОПКИ И HINT ПОД ДЕЙСТВИЯМИ
========================================================= */
/* =========================================================
5. HERO — КНОПКИ И HINT ПОД ДЕЙСТВИЯМИ
========================================================= */

.phc-hero__actions-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--phc-space-2);
}

.phc-hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--phc-space-2);
  margin-block-start: var(--phc-space-4);
  align-items: stretch;
}

.phc-hero__action {
  display: flex;
  align-items: stretch;
  min-width: 0;
  inline-size: 100%;
}

.phc-hero__action--primary,
.phc-hero__action--secondary {
  display: flex;
  min-width: 0;
  inline-size: 100%;
}

.phc-hero__action > *,
.phc-hero__action .phc-action,
.phc-hero__action .phc-action__details {
  inline-size: 100%;
  min-width: 0;
}

/* Базовый стиль hero-кнопок */
.phc-btn,
.phc-hero__actions > .phc-hero__action .phc-action__btn,
.phc-hero__actions > .phc-hero__action > button,
.phc-hero__actions > .phc-hero__action > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--phc-btn-height-lg);
  padding-inline: var(--phc-btn-padding-x);
  padding-block: var(--phc-btn-padding-y);
  border-radius: var(--phc-radius-button);
  font-size: var(--phc-font-size-base);
  font-weight: var(--phc-font-weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition:
    background-color var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    color var(--phc-transition-fast) var(--phc-ease-in-out),
    transform var(--phc-transition-fast) var(--phc-ease-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-btn:hover,
.phc-hero__actions > .phc-hero__action .phc-action__btn:hover,
.phc-hero__actions > .phc-hero__action > button:hover,
.phc-hero__actions > .phc-hero__action > a:hover {
  transform: translateY(calc(var(--phc-space-1) * -1));
}

/* PRIMARY */
.phc-hero__action--primary > .phc-btn,
.phc-hero__action--primary > .phc-action__btn,
.phc-hero__action--primary > button,
.phc-hero__action--primary > a {
  background: var(--phc-btn-primary-bg);
  color: var(--phc-btn-primary-text);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.24)
}

.phc-hero__action--primary > .phc-btn:hover,
.phc-hero__action--primary > .phc-action__btn:hover,
.phc-hero__action--primary > button:hover,
.phc-hero__action--primary > a:hover {
  background: var(--phc-btn-primary-hover);
}

/* SECONDARY */
.phc-hero__action--secondary > .phc-btn,
.phc-hero__action--secondary > .phc-action__btn,
.phc-hero__action--secondary > button,
.phc-hero__action--secondary > a {
  background: var(--phc-bg-cream);
  color: var(--phc-brand-yellow-dark);
  border: 1.5px solid var(--phc-btn-primary-bg);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.phc-hero__action--secondary > .phc-btn:hover,
.phc-hero__action--secondary > .phc-action__btn:hover,
.phc-hero__action--secondary > button:hover,
.phc-hero__action--secondary > a:hover {
  background: var(--phc-bg-cream-dark);
}

/* HINT */
.phc-hero__action-hint {
  margin: var(--phc-num-0);
  font-size: var(--phc-font-size-sm);
  line-height: var(--phc-line-height-base);
}

.phc-hero--theme-yellow .phc-hero__action-hint,
.phc-hero--theme-cream .phc-hero__action-hint {
  color: var(--phc-text-muted);
}

.phc-hero--theme-blue .phc-hero__action-hint,
.phc-hero--theme-graphite .phc-hero__action-hint {
  color: var(--phc-text-on-dark-muted);
}

/* =========================================================
6. ACTION MENU — ОБОЛОЧКА И ПОЗИЦИОНИРОВАНИЕ
========================================================= */
.phc-action {
position: relative;
display: flex;
inline-size: 100%; /* Ключевое: на всю ширину родителя */
}
.phc-action__details {
position: relative;
inline-size: 100%; /* Ключевое: details на 100% */
}
.phc-action__details[open] {
z-index: var(--phc-z-dropdown);
}
.phc-action__btn {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%; /* Ключевое: summary на 100% */
min-block-size: var(--phc-btn-height-lg);
}
.phc-action__btn::-webkit-details-marker {
display: none;
}
.phc-action__menu {
position: absolute;
inset-inline-start: var(--phc-num-0);
inset-block-start: calc(var(--phc-percent-100) + var(--phc-action-menu-offset-y));
z-index: var(--phc-z-dropdown);
min-inline-size: var(--phc-action-menu-min-width);
padding: var(--phc-action-menu-padding);
border-radius: var(--phc-action-menu-radius);
background: var(--phc-action-menu-bg);
border: 1px solid var(--phc-action-menu-border);
box-shadow: var(--phc-action-menu-shadow);
}
.phc-action__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--phc-action-item-gap);

  inline-size: 100%;
  min-block-size: var(--phc-action-item-min-height);

  padding-block: var(--phc-action-item-padding-y);
  padding-inline: var(--phc-action-item-padding-x);
  border-radius: var(--phc-action-item-radius);

  background: var(--phc-action-item-bg);
  color: var(--phc-action-item-text);

  border: var(--phc-action-item-border-width) solid var(--phc-action-item-border);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.phc-action__label {
  flex: 0 1 auto;
  text-align: left;
}

.phc-action__item:hover {
  background: var(--phc-action-item-bg-hover);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
  border-color: rgba(31, 35, 40, 0.12);  
}

.phc-action__item:active {
  background: var(--phc-action-item-bg-active);
}

.phc-action__label {
line-height: var(--phc-line-height-base);
}
.phc-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: var(--phc-action-icon-size-box);
  block-size: var(--phc-action-icon-size-box);
}


.phc-action__item .phc-icon {
  inline-size: var(--phc-action-icon-size);
  block-size: var(--phc-action-icon-size);
}


.phc-action__hint {
  margin-top: var(--phc-space-2);
  padding-top: var(--phc-space-2);
  border-top: 1px solid var(--phc-action-hint-border);
  font-size: var(--phc-font-size-xs);
  line-height: 1.4;
  color: var(--phc-action-hint-text);
}
/* =========================================================
7. ACTION MENU — ЦВЕТА СЕРВИСОВ И КАРТ
========================================================= */
.phc-action__item--telegram .phc-action__icon,
.phc-action__item--telegram .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-telegram);
}

.phc-action__item--max .phc-action__icon,
.phc-action__item--max .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-max);
}

.phc-action__item--mail .phc-action__icon,
.phc-action__item--mail .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-mail);
}

.phc-action__item--google .phc-action__icon,
.phc-action__item--google .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-google);
}

.phc-action__item--yandex .phc-action__icon,
.phc-action__item--yandex .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-yandex);
}

.phc-action__item--2gis .phc-action__icon,
.phc-action__item--2gis .phc-action__icon .phc-icon {
  color: var(--phc-action-tone-2gis);
}

/* =========================================================
Hover
========================================================= */


.phc-action__item--max:hover {
  border-color: var(--phc-action-tone-max-soft);
}

.phc-action__item--mail:hover {
  border-color: var(--phc-action-tone-mail-soft);
}

.phc-action__item--google:hover {
  border-color: var(--phc-action-tone-google-soft);
}

.phc-action__item--yandex:hover {
  border-color: var(--phc-action-tone-yandex-soft);
}

.phc-action__item--2gis:hover {
  border-color: var(--phc-action-tone-2gis-soft);
}

/* =========================================================
ACTION MENU — WIDTH RESTORE
========================================================= */

.phc-action {
  position: relative;
  display: flex;
  inline-size: 100%;
  min-width: 0;
}

.phc-action__details {
  position: relative;
  inline-size: 100%;
  min-width: 0;
}

.phc-action__details[open] {
  z-index: var(--phc-z-dropdown);
}

.phc-action__btn {
  inline-size: 100%;
  min-inline-size: 0;
  justify-content: center;
}

.phc-action__menu {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inset-block-start: calc(100% + var(--phc-action-menu-offset-y));
  z-index: var(--phc-z-dropdown);
  inline-size: 100%;
  min-inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: var(--phc-space-1);
}

.phc-action__menu .phc-action__item {
  inline-size: 100%;
  box-sizing: border-box;
  border-width: var(--phc-action-item-border-width);
  border-style: solid;
  border-color: var(--phc-action-item-border);
  outline: none;
}

/* =========================================================
8. HERO — ФАКТЫ
========================================================= */
.phc-hero__facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--phc-hero-meta-gap);
margin-top: var(--phc-space-6);
}
.phc-hero__fact {
display: inline-flex;
align-items: center;
gap: var(--phc-space-2);
max-inline-size: 100%;
}
.phc-hero__fact-icon {
flex-shrink: var(--phc-num-0);
/* Квадрат со скошенными углами вместо круга */
border-radius: var(--phc-radius-md) !important;
background: var(--phc-bg-white) !important;
border: 1px solid var(--phc-border-light) !important;
box-shadow: var(--phc-shadow-sm) !important;

}

/* Градиент для иконки внутри бейджа */
.phc-hero__fact-icon .phc-icon {
color: var(--phc-brand-yellow-dark);
}

.phc-hero__fact-text {
font-size: var(--phc-font-size-sm);
line-height: var(--phc-line-height-base);
}
.phc-hero--theme-yellow .phc-hero__fact-text,
.phc-hero--theme-cream .phc-hero__fact-text {
color: var(--phc-text-secondary);
}
.phc-hero--theme-blue .phc-hero__fact-text,
.phc-hero--theme-graphite .phc-hero__fact-text {
color: var(--phc-text-on-dark);
}
/* =========================================================
   9. HERO — MEDIA / IMAGE SYSTEM
   ========================================================= */

.phc-hero__media {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1;
}

.phc-hero__figure {
  inline-size: min(var(--phc-percent-100), var(--phc-hero-media-maxw));
  aspect-ratio: 4 / 5;
  margin: var(--phc-num-0);
  border-radius: var(--phc-radius-none);
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.phc-hero__image {
  display: block;
  inline-size: var(--phc-percent-100);
  block-size: var(--phc-percent-100);
  object-position: center;
  background: transparent;
}

.phc-hero[data-image-fit="contain"] .phc-hero__image {
  object-fit: contain;
}

.phc-hero[data-image-fit="cover"] .phc-hero__image {
  object-fit: cover;
}

.phc-hero[data-image-background="transparent"] .phc-hero__figure {
  background: transparent;
}

/* =========================================================
   HERO IMAGE — TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .phc-hero__media {
    justify-content: flex-start;
  }

  .phc-hero__figure {
    inline-size: var(--phc-percent-100);
    max-inline-size: 28rem;
  }
}

/* =========================================================
   HERO IMAGE — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .phc-hero__figure {
    inline-size: var(--phc-percent-100);
    max-inline-size: var(--phc-percent-100);
    max-block-size: none;
  }
}



/* =========================================================
   10. CTA SECTION
   ========================================================= */

.phc-cta-section__grid {
  display: grid;
  gap: var(--phc-cta-section-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--phc-card-min), 1fr));
}


/* =========================================================
   10. CTA SECTION — FOOTER CTA V2
   Новый рендер под cards[] и Hero-совместимые action-кнопки
   ========================================================= */

/* ---------------------------------------------------------
   10.1. CTA SECTION — ТЕМЫ СЕКЦИИ
   --------------------------------------------------------- */

.phc-cta-section.phc-cta-section--theme-dark {
  background: var(--phc-bg-graphite);
  color: var(--phc-text-on-dark);
}

.phc-cta-section.phc-cta-section--theme-graphite {
  background:
    linear-gradient(
      180deg,
      rgba(255, 244, 220, 0.035) 0%,
      rgba(255, 244, 220, 0.015) 100%
    ),
    var(--phc-bg-graphite);
  color: var(--phc-text-on-dark);
}

.phc-cta-section.phc-cta-section--theme-blue {
  background: var(--phc-bg-blue-dark);
  color: var(--phc-text-on-dark);
}


.phc-cta-section.phc-cta-section--theme-cream {
  background: var(--phc-bg-cream);
  color: var(--phc-text-primary);
}

.phc-cta-section__head {
  max-inline-size: 56rem;
}

.phc-cta-section__title {
  margin: var(--phc-num-0);
}

.phc-cta-section__subtitle {
  margin: var(--phc-num-0);
}

.phc-cta-section__description {
  margin: var(--phc-space-2) var(--phc-num-0) var(--phc-num-0);
  font-size: var(--phc-font-size-base);
  line-height: var(--phc-line-height-base);
}

.phc-cta-section--theme-dark .phc-cta-section__title,
.phc-cta-section--theme-graphite .phc-cta-section__title,
.phc-cta-section--theme-blue .phc-cta-section__title {
  color: var(--phc-text-on-dark);
}

.phc-cta-section--theme-dark .phc-cta-section__subtitle,
.phc-cta-section--theme-graphite .phc-cta-section__subtitle,
.phc-cta-section--theme-blue .phc-cta-section__subtitle,
.phc-cta-section--theme-dark .phc-cta-section__description,
.phc-cta-section--theme-graphite .phc-cta-section__description,
.phc-cta-section--theme-blue .phc-cta-section__description {
  color: var(--phc-text-on-dark-muted);
}


.phc-cta-section--theme-cream .phc-cta-section__title {
  color: var(--phc-text-primary);
}

.phc-cta-section--theme-cream .phc-cta-section__subtitle,
.phc-cta-section--theme-cream .phc-cta-section__description {
  color: var(--phc-text-secondary);
}

.phc-cta-section > .phc-container {
  inline-size: min(
    calc(var(--phc-percent-100) - (var(--phc-space-3) * 2)),
    var(--phc-breakpoint-xl)
  );
  margin-inline: auto;
}
/* ---------------------------------------------------------
   10.2. CTA SECTION — ОБЩАЯ ИКОНКА БЛОКА
   --------------------------------------------------------- */

.phc-cta-section__block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-block-end: var(--phc-space-3);
}

.phc-cta-section__block-icon-badge {
  box-shadow: var(--phc-shadow-yellow);
}

/* ---------------------------------------------------------
   10.3. CTA SECTION — СЕТКА
   --------------------------------------------------------- */

.phc-cta-section {
  --phc-cta-card-track-width: calc(
    (100% - (var(--phc-cta-section-grid-gap) * 2)) / 3
  );
}

.phc-cta-section__grid {
  display: grid;
  gap: var(--phc-cta-section-grid-gap);
  align-items: stretch;
  justify-content: center;
}

.phc-cta-section__grid > * {
  min-inline-size: 0;
}

.phc-cta-section--cards-1 .phc-cta-section__grid {
  grid-template-columns: minmax(0, var(--phc-cta-card-track-width));
}

.phc-cta-section--cards-2 .phc-cta-section__grid {
  grid-template-columns: repeat(2, minmax(0, var(--phc-cta-card-track-width)));
}

.phc-cta-section--cards-3 .phc-cta-section__grid {
  grid-template-columns: repeat(3, minmax(0, var(--phc-cta-card-track-width)));
}
/* ---------------------------------------------------------
   10.4. CTA CARD — КАРТОЧКА
   --------------------------------------------------------- */

.phc-cta-card {
  display: flex;
  min-inline-size: 0;
  block-size: 100%;
}

.phc-cta-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--phc-space-3);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 100%;
  block-size: 100%;
  padding: var(--phc-cta-card-padding);
  border-radius: var(--phc-cta-card-radius);
  background: var(--phc-cta-card-bg);
  border: 1px solid var(--phc-cta-card-border);
  box-shadow: var(--phc-cta-card-shadow);
  transition:
    transform var(--phc-transition-fast) var(--phc-ease-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    background-color var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-cta-card:hover .phc-cta-card__inner {
  transform: translateY(calc(var(--phc-space-1) * -1));
  box-shadow: var(--phc-cta-card-shadow-hover);
}

.phc-cta-card__media {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.phc-cta-card__icon-badge {
  inline-size: var(--phc-cta-card-icon-size);
  block-size: var(--phc-cta-card-icon-size);
  min-inline-size: var(--phc-cta-card-icon-size);
  min-block-size: var(--phc-cta-card-icon-size);
  background: var(--phc-cta-card-icon-bg);
  box-shadow: var(--phc-cta-card-icon-shadow);
}

.phc-cta-card__icon-badge > .phc-icon {
  inline-size: var(--phc-cta-card-icon-svg-size);
  block-size: var(--phc-cta-card-icon-svg-size);
  color: var(--phc-cta-card-icon-color);
}

.phc-cta-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--phc-space-2);
  flex: 1 1 auto;
  min-inline-size: 0;
}

.phc-cta-card__title {
  margin: var(--phc-num-0);
  font-size: var(--phc-font-size-xl);
  line-height: var(--phc-line-height-tight);
  color: var(--phc-cta-card-title-color);
}

.phc-cta-card__subtitle {
  margin: var(--phc-num-0);
  font-size: var(--phc-font-size-base);
  line-height: var(--phc-line-height-base);
}

.phc-cta-card__text {
  margin: var(--phc-num-0);
  font-size: var(--phc-font-size-base);
  line-height: var(--phc-line-height-base);
  color: var(--phc-cta-card-text-color);
}

.phc-cta-card__actions {
  margin-block-start: auto;
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}

.phc-cta-card__actions .phc-hero__action,
.phc-cta-card__actions .phc-action {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}

.phc-cta-card__actions .phc-hero__action > *,
.phc-cta-card__actions .phc-action > *,
.phc-cta-card__actions .phc-action__details,
.phc-cta-card__actions .phc-action__btn,
.phc-cta-card__actions .phc-btn,
.phc-cta-card__actions a,
.phc-cta-card__actions button {
  inline-size: 100%;
  min-inline-size: 0;
}

.phc-cta-card__actions > .phc-hero__action > .phc-action__btn,
.phc-cta-card__actions > .phc-hero__action > .phc-btn,
.phc-cta-card__actions > .phc-hero__action > a,
.phc-cta-card__actions > .phc-hero__action > button,
.phc-cta-card__actions > .phc-action > .phc-action__details > .phc-action__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--phc-btn-height-lg);
  padding-inline: var(--phc-btn-padding-x);
  padding-block: var(--phc-btn-padding-y);
  border-radius: var(--phc-radius-button);
  text-decoration: none;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   10.5. CTA CARD — СВЕТЛЫЕ ТЕМЫ
   --------------------------------------------------------- */

.phc-cta-section--theme-cream .phc-cta-card__inner {
  background: var(--phc-bg-white);
  border-color: var(--phc-border-light);
}

.phc-cta-section--theme-cream .phc-cta-card__title {
  color: var(--phc-text-primary);
}

.phc-cta-section--theme-cream .phc-cta-card__subtitle,
.phc-cta-section--theme-cream .phc-cta-card__text {
  color: var(--phc-text-secondary);
}

/* ---------------------------------------------------------
   10.6. CTA CARD — ТЁМНЫЕ ТЕМЫ
   --------------------------------------------------------- */

.phc-cta-section--theme-dark .phc-cta-card__inner,
.phc-cta-section--theme-blue .phc-cta-card__inner {
  background: var(--phc-cta-card-bg);
  border-color: var(--phc-cta-card-border);
}

.phc-cta-section--theme-dark .phc-cta-card__title,
.phc-cta-section--theme-blue .phc-cta-card__title {
  color: var(--phc-cta-card-title-color);
}

.phc-cta-section--theme-dark .phc-cta-card__subtitle,
.phc-cta-section--theme-blue .phc-cta-card__subtitle,
.phc-cta-section--theme-dark .phc-cta-card__text,
.phc-cta-section--theme-blue .phc-cta-card__text {
  color: var(--phc-text-on-dark-muted);
}

/* мягкий тёплый graphite только для CTA */

.phc-cta-section--theme-graphite .phc-cta-card__inner {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 244, 220, 0.12);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 248, 235, 0.035);
}

.phc-cta-section--theme-graphite .phc-cta-card:hover .phc-cta-card__inner {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 248, 235, 0.05);
}

.phc-cta-section--theme-graphite .phc-cta-card__title {
  color: var(--phc-text-on-dark);
}

.phc-cta-section--theme-graphite .phc-cta-card__subtitle,
.phc-cta-section--theme-graphite .phc-cta-card__text {
  color: rgba(255, 248, 235, 0.82);
}

/* graphite — квадратные мягкие бейджи под иконками */

.phc-cta-section--theme-graphite .phc-cta-card__icon-badge {
  border-radius: var(--phc-radius-md);

  background: rgba(255,248,235,0.92);

  box-shadow:
    0 6px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

/* иконка — графитовая */

.phc-cta-section--theme-graphite .phc-cta-card__icon-badge > .phc-icon {
  color: rgba(38,44,52,0.85);
}

/* ---------------------------------------------------------
   10.7. CTA BUTTON STYLES — HERO-СОВМЕСТИМЫЕ РАСШИРЕНИЯ
   --------------------------------------------------------- */

.phc-hero__action--dark .phc-btn,
.phc-hero__action--dark .phc-action__btn,
.phc-hero__action--dark button,
.phc-hero__action--dark a {
  background: var(--phc-bg-graphite);
  color: var(--phc-text-on-dark);
  border-color: var(--phc-border-dark);
  box-shadow: var(--phc-shadow-md);
}

.phc-hero__action--dark .phc-btn:hover,
.phc-hero__action--dark .phc-action__btn:hover,
.phc-hero__action--dark button:hover,
.phc-hero__action--dark a:hover {
  background: var(--phc-bg-charcoal);
}

.phc-hero__action--light .phc-btn,
.phc-hero__action--light .phc-action__btn,
.phc-hero__action--light button,
.phc-hero__action--light a {
  background: var(--phc-bg-white);
  color: var(--phc-text-primary);
  border-color: var(--phc-border-light);
  box-shadow: var(--phc-shadow-sm);
}

.phc-hero__action--light .phc-btn:hover,
.phc-hero__action--light .phc-action__btn:hover,
.phc-hero__action--light button:hover,
.phc-hero__action--light a:hover {
  background: var(--phc-bg-cream);
}

.phc-hero__action--accent-blue .phc-btn,
.phc-hero__action--accent-blue .phc-action__btn,
.phc-hero__action--accent-blue button,
.phc-hero__action--accent-blue a {
  background: var(--phc-btn-secondary-bg);
  color: var(--phc-btn-secondary-text);
  border-color: var(--phc-brand-blue-light);
  box-shadow: var(--phc-shadow-blue);
}

.phc-hero__action--accent-blue .phc-btn:hover,
.phc-hero__action--accent-blue .phc-action__btn:hover,
.phc-hero__action--accent-blue button:hover,
.phc-hero__action--accent-blue a:hover {
  background: var(--phc-btn-secondary-hover);
}

.phc-hero__action--accent-yellow .phc-btn,
.phc-hero__action--accent-yellow .phc-action__btn,
.phc-hero__action--accent-yellow button,
.phc-hero__action--accent-yellow a {
  background: var(--phc-btn-primary-bg);
  color: var(--phc-btn-primary-text);
  border-color: var(--phc-btn-primary-border);
  box-shadow: var(--phc-shadow-yellow);
}

.phc-hero__action--accent-yellow .phc-btn:hover,
.phc-hero__action--accent-yellow .phc-action__btn:hover,
.phc-hero__action--accent-yellow button:hover,
.phc-hero__action--accent-yellow a:hover {
  background: var(--phc-btn-primary-hover);
}

.phc-cta-card__actions .phc-hero__action--primary .phc-action__btn,
.phc-cta-card__actions .phc-hero__action--primary.phc-action .phc-action__btn {
  background: var(--phc-btn-primary-bg);
  color: var(--phc-btn-primary-text);
  border-color: var(--phc-btn-primary-border);
  box-shadow: var(--phc-shadow-yellow);
}

.phc-cta-card__actions .phc-hero__action--primary .phc-action__btn:hover,
.phc-cta-card__actions .phc-hero__action--primary.phc-action .phc-action__btn:hover {
  background: var(--phc-btn-primary-hover);
}

.phc-cta-card__actions .phc-hero__action--secondary .phc-action__btn,
.phc-cta-card__actions .phc-hero__action--secondary.phc-action .phc-action__btn {
  background: var(--phc-bg-cream);
  color: var(--phc-brand-yellow-dark);
  border: 2px solid var(--phc-btn-primary-bg);
  box-shadow: none;
}

.phc-cta-card__actions .phc-hero__action--secondary .phc-action__btn:hover,
.phc-cta-card__actions .phc-hero__action--secondary.phc-action .phc-action__btn:hover {
  background: var(--phc-bg-cream-dark);
}

/* graphite — мягкие secondary кнопки */

.phc-cta-section--theme-graphite
.phc-hero__action--secondary
.phc-action__btn {

  background: rgba(255,248,235,0.92);

  color: var(--phc-text-primary);

  border: 1px solid rgba(255,248,235,0.55);

  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.phc-cta-section--theme-graphite
.phc-hero__action--secondary
.phc-action__btn:hover {

  background: rgba(255,248,235,0.98);

  transform: translateY(calc(var(--phc-space-1) * -1));
}


/* ---------------------------------------------------------
   10.8. CTA SECTION — АДАПТИВ
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  .phc-cta-section {
    --phc-cta-card-track-width: calc(
      (100% - var(--phc-cta-section-grid-gap-mobile)) / 2
    );
  }

  .phc-cta-section__grid {
    gap: var(--phc-cta-section-grid-gap-mobile);
    justify-content: center;
  }

  .phc-cta-section--cards-1 .phc-cta-section__grid {
    grid-template-columns: minmax(0, var(--phc-cta-card-track-width));
  }

  .phc-cta-section--cards-2 .phc-cta-section__grid,
  .phc-cta-section--cards-3 .phc-cta-section__grid {
    grid-template-columns: repeat(2, minmax(0, var(--phc-cta-card-track-width)));
  }
}

@media (max-width: 768px) {
  .phc-cta-section__grid,
  .phc-cta-section--cards-1 .phc-cta-section__grid,
  .phc-cta-section--cards-2 .phc-cta-section__grid,
  .phc-cta-section--cards-3 .phc-cta-section__grid {
    grid-template-columns: minmax(var(--phc-num-0), 1fr);
  }

  .phc-cta-card__inner {
    padding: var(--phc-space-3);
  }

  .phc-cta-card__actions {
    inline-size: var(--phc-percent-100);
  }

  .phc-cta-card__actions .phc-action__menu {
    position: static;
    margin-top: var(--phc-space-2);
    min-inline-size: auto;
    inline-size: var(--phc-percent-100);
  }
}

/* ---------------------------------------------------------
   10.9. CTA SECTION — REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .phc-cta-card__inner {
    transition: none;
  }

  .phc-cta-card:hover .phc-cta-card__inner {
    transform: none;
  }
}


/* =========================================================
   14. АДАПТИВ — ПЛАНШЕТ
   ========================================================= */
@media (max-width: 1024px) {
  .phc-hero__inner {
    grid-template-columns: minmax(var(--phc-num-0), var(--phc-num-1));
    gap: var(--phc-hero-grid-gap-mobile);
    min-block-size: auto;
  }

  .phc-hero__content,
  .phc-hero__media {
    inline-size: var(--phc-percent-100);
    max-inline-size: var(--phc-percent-100);
    min-inline-size: var(--phc-num-0);
  }

  .phc-hero__content {
    max-inline-size: var(--phc-percent-100);
  }

  .phc-hero__title {
    font-size: var(--phc-font-size-4xl);
  }

  .phc-hero__media {
    justify-content: center;
  }

  .phc-hero__figure {
    inline-size: var(--phc-percent-100);
    max-inline-size: 30rem;
    margin-inline: auto;
  }

  .phc-cta-section__grid {
    gap: var(--phc-cta-section-grid-gap-mobile);
  }
}

/* =========================================================
   15. АДАПТИВ — МОБИЛЬНЫЙ
   ========================================================= */

@media (max-width: 768px) {
  .phc-hero > .phc-container {
    inline-size: min(
      calc(var(--phc-percent-100) - (var(--phc-space-2) * 2)),
      var(--phc-breakpoint-xl)
    );
  }

  .phc-hero__inner {
    gap: var(--phc-hero-grid-gap-mobile);
  }

  .phc-hero__content,
  .phc-hero__media {
    inline-size: var(--phc-percent-100);
    max-inline-size: var(--phc-percent-100);
    min-inline-size: var(--phc-num-0);
  }

  .phc-hero__content {
    gap: var(--phc-hero-content-gap-minimal);
  }

  .phc-hero__title {
    font-size: clamp(1.875rem, 6vw, 2.375rem);
    line-height: 1.12;
    max-inline-size: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .phc-hero__subtitle {
    font-size: var(--phc-font-size-base);
  }

  .phc-hero__actions {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .phc-hero__action,
  .phc-hero__action .phc-btn,
  .phc-hero__action .phc-action__btn,
  .phc-hero__action button,
  .phc-hero__action a {
    inline-size: var(--phc-percent-100);
  }

  .phc-hero__action {
    align-self: start;
  }

  .phc-hero__action .phc-action,
  .phc-hero__action .phc-action__details {
    inline-size: var(--phc-percent-100);
  }

  .phc-action__menu {
    position: static;
    margin-top: var(--phc-space-2);
    min-inline-size: auto;
    inline-size: var(--phc-percent-100);
    max-inline-size: var(--phc-percent-100);
  }

  .phc-hero__facts {
    flex-direction: column;
    align-items: flex-start;
  }

  .phc-hero__figure {
    inline-size: var(--phc-percent-100);
    max-inline-size: var(--phc-percent-100);
    max-block-size: none;
  }

  .phc-cta-card {
    padding: var(--phc-space-3);
  }
}

/* =========================================================
   16. CTA BUTTONS — PREMIUM ACTIONS
   Primary и Secondary кнопки для Hero и CTA блоков
   ========================================================= */

/* ---------------------------------------------------------
   PRIMARY PREMIUM CTA
   Градиентная фирменная кнопка
   --------------------------------------------------------- */

.phc-btn.phc-btn-primary-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: linear-gradient(
    135deg,
    var(--phc-brand-yellow-light) 0%,
    var(--phc-brand-yellow-dark) 50%,
    var(--phc-brand-orange) 100%
  );

  color: var(--phc-text-on-yellow);
  font-size: var(--phc-font-size-lg);
  font-weight: var(--phc-font-weight-semibold);

  border: 1px solid rgba(0,0,0,0.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 6px 14px rgba(0,0,0,0.18);

  transition:
    transform var(--phc-transition-fast) var(--phc-ease-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out);
	
	outline: 1px solid rgba(0,0,0,0.06);
	outline-offset: -1px;	
}

.phc-btn.phc-btn-primary-premium:hover {
  transform: translateY(calc(var(--phc-space-1) * -0.5));
  border-color: rgba(0,0,0,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 8px 16px rgba(0,0,0,0.20);
}


/* ---------------------------------------------------------
   PRIMARY PREMIUM — LIGHT SWEEP EFFECT
   Дорогой hover-блик
   --------------------------------------------------------- */

.phc-btn.phc-btn-primary-premium::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -100%;
  inline-size: 45%;
  transform: skewX(-24deg);

  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.15) 60%,
    rgba(255,255,255,0) 100%
  );

  opacity: 0;

  transition:
    inset-inline-start var(--phc-transition-fast) var(--phc-ease-in-out),
    opacity var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-btn.phc-btn-primary-premium:hover::after,
.phc-btn.phc-btn-primary-premium:focus-visible::after {
  inset-inline-start: 130%;
  opacity: 1;
}


/* ---------------------------------------------------------
   SECONDARY PREMIUM CTA
   Белая кнопка с фирменной градиентной окантовкой
   --------------------------------------------------------- */

.phc-btn.phc-btn-secondary-premium {
  position: relative;

  color: var(--phc-text-primary);

  background: rgba(255,255,255,0.65);

  border: 1.5px solid rgba(0,0,0,0.14);

  backdrop-filter: blur(4px);

  box-shadow:
    0 1px 2px rgba(16,24,40,0.04),
    0 4px 12px rgba(16,24,40,0.08);

  transition:
    transform var(--phc-transition-fast) var(--phc-ease-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    background var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-btn.phc-btn-secondary-premium:hover,
.phc-btn.phc-btn-secondary-premium:focus-visible {
  transform: translateY(calc(var(--phc-space-1) * -0.5));

  border-color: rgba(0,0,0,0.22);

  background: rgba(255,255,255,0.9);

  box-shadow:
    0 2px 6px rgba(16,24,40,0.08),
    0 8px 18px rgba(16,24,40,0.14);
}
/* ---------------------------------------------------------
   SAFETY — текст и иконки поверх эффектов
   --------------------------------------------------------- */

.phc-btn.phc-btn-primary-premium > *,
.phc-btn.phc-btn-secondary-premium > * {
  position: relative;
  z-index: 1;
}
/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .phc-btn,
  .phc-hero__actions > .phc-hero__action .phc-action__btn,
  .phc-hero__actions > .phc-hero__action > button,
  .phc-hero__actions > .phc-hero__action > a,
  .phc-action__item,
  .phc-cta-card {
    transition: none;
  }

  .phc-btn:hover,
  .phc-hero__actions > .phc-hero__action .phc-action__btn:hover,
  .phc-hero__actions > .phc-hero__action > button:hover,
  .phc-hero__actions > .phc-hero__action > a:hover,
  .phc-cta-card:hover {
    transform: none;
  }
}

/* =========================================================
   CTA SECTION — COMPOSITION TUNING (ALL THEMES)
   Общая композиция финального CTA для всех тем
   ========================================================= */

.phc-cta-section__head {
  margin-inline: auto;
  margin-block-end: var(--phc-space-5);
  text-align: center;
  align-items: center;
}

.phc-cta-section__title {
  text-align: center;
}

.phc-cta-section__subtitle,
.phc-cta-section__description {
  text-align: center;
  margin-inline: auto;
}

.phc-cta-section__grid {
  gap: calc(var(--phc-cta-section-grid-gap) * 1.25);
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  .phc-cta-section__head {
    margin-block-end: var(--phc-space-4);
  }

  .phc-cta-section__grid {
    gap: calc(var(--phc-cta-section-grid-gap-mobile) * 1.25);
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {
  .phc-cta-section__head {
    margin-block-end: var(--phc-space-3);
    text-align: left;
    align-items: flex-start;
  }

  .phc-cta-section__title,
  .phc-cta-section__subtitle,
  .phc-cta-section__description {
    text-align: left;
  }

  .phc-cta-section__subtitle,
  .phc-cta-section__description {
    margin-inline: 0;
  }

  .phc-cta-section__grid {
    gap: var(--phc-cta-section-grid-gap-mobile);
  }
}

/* =========================================================
   CTA SECTION — THEME YELLOW
   Поведение фона как у HERO + premium cards
   ========================================================= */

.phc-cta-section.phc-cta-section--theme-yellow {
  position: relative;
  overflow: visible;

  background-image: url('/wp-content/themes/blocksy-child/assets/images/hero/hero-fon-fotochka-teplyy-zheltyy-gradient.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: var(--phc-text-primary);
}

.phc-cta-section.phc-cta-section--theme-yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--phc-bg-cream);
  opacity: 0.40;
  pointer-events: none;
  z-index: 0;
}

.phc-cta-section.phc-cta-section--theme-yellow::after {
  content: none;
}

.phc-cta-section.phc-cta-section--theme-yellow > .phc-container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   HEAD / TYPOGRAPHY
   --------------------------------------------------------- */

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-section__title {
  color: var(--phc-text-primary);
  letter-spacing: -0.02em;
}

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-section__subtitle,
.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-section__description {
  color: var(--phc-text-secondary);
}

/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__inner {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-top-color: rgba(255, 255, 255, 0.92);

  border-radius: 16px;

  box-shadow:
    0 10px 28px rgba(28, 32, 38, 0.10),
    0 3px 8px rgba(28, 32, 38, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);

  transition:
    transform var(--phc-transition-fast) var(--phc-ease-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    background-color var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card:hover .phc-cta-card__inner {
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px rgba(28, 32, 38, 0.12),
    0 5px 12px rgba(28, 32, 38, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.88);
}

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__title {
  color: var(--phc-text-primary);
  letter-spacing: -0.01em;
}

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__subtitle,
.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__text {
  color: var(--phc-text-secondary);
}

/* ---------------------------------------------------------
   ICON BADGE
   --------------------------------------------------------- */

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__icon-badge {
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 248, 225, 0.92) 100%
    );

  border: 1px solid rgba(255, 193, 7, 0.18);

  box-shadow:
    0 6px 14px rgba(28, 32, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.phc-cta-section.phc-cta-section--theme-yellow .phc-cta-card__icon-badge > .phc-icon {
  color: var(--phc-brand-blue-primary);
}