/*
 * @file: Source\themes\blocksy-child\assets\css\photocka-patterns-theme-layer.css
 * @version: 1.0.4
 * @updated: 2026-03-30 23:58:05
 * @size: 21711
 */
/* --------------------------------------------------------------------------
   photocka-patterns-theme-layer.css
   Theme layer + visual unification for internal patterns
   Depends on:
   - photocka-variables.css
   - photocka-styles.css
   - photocka-motion.css
   - photocka-icons.css
   - photocka-hero-cta.css
   -------------------------------------------------------------------------- */

/* ==========================================================
   1. BASE THEME MODIFIERS
   Только темизация контейнера и общих внутренних элементов.
   ========================================================== */



.phc-pattern--theme-white {
  background: var(--phc-pattern-theme-white-bg);
  border-color: var(--phc-pattern-theme-white-border);
}

.phc-pattern--theme-cream {
  background: var(--phc-pattern-theme-cream-bg);
  border-color: var(--phc-pattern-theme-cream-border);
}

.phc-pattern--theme-soft-gray {
  background: var(--phc-pattern-theme-soft-gray-bg);
  border-color: var(--phc-pattern-theme-soft-gray-border);
}

.phc-pattern--theme-yellow-soft {
  background: var(--phc-pattern-theme-yellow-soft-bg);
  border-color: var(--phc-pattern-theme-yellow-soft-border);
}

.phc-pattern--theme-graphite {
  background: var(--phc-pattern-theme-graphite-bg);
  border-color: var(--phc-pattern-theme-graphite-border);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 248, 235, 0.035);
}

.phc-pattern--theme-graphite .phc-pattern__title,
.phc-pattern--theme-graphite .phc-pattern__row-key,
.phc-pattern--theme-graphite .phc-pattern__row-title,
.phc-pattern--theme-graphite .phc-pattern__process-title,
.phc-pattern--theme-graphite .phc-pattern__card-title,
.phc-pattern--theme-graphite .phc-pattern__card-value,
.phc-pattern--theme-graphite .phc-pattern__faq-question,
.phc-pattern--theme-graphite .phc-pattern__table thead th,
.phc-pattern--theme-graphite .phc-pattern__dl dt {
  color: var(--phc-pattern-text-on-dark);
}

.phc-pattern--theme-graphite .phc-pattern__lead,
.phc-pattern--theme-graphite .phc-pattern__subtitle,
.phc-pattern--theme-graphite .phc-pattern__description,
.phc-pattern--theme-graphite .phc-pattern__body p,
.phc-pattern--theme-graphite .phc-pattern__body li,
.phc-pattern--theme-graphite .phc-pattern__body dd,
.phc-pattern--theme-graphite .phc-pattern__row-value,
.phc-pattern--theme-graphite .phc-pattern__row-text,
.phc-pattern--theme-graphite .phc-pattern__process-text,
.phc-pattern--theme-graphite .phc-pattern__card-text,
.phc-pattern--theme-graphite .phc-pattern__card-subtitle,
.phc-pattern--theme-graphite .phc-pattern__card-meta,
.phc-pattern--theme-graphite .phc-pattern__faq-answer,
.phc-pattern--theme-graphite .phc-pattern__meta-text,
.phc-pattern--theme-graphite .phc-pattern__dl dd,
.phc-pattern--theme-graphite .phc-pattern__table tbody td {
  color: var(--phc-pattern-text-on-dark-muted);
}

.phc-pattern--theme-graphite .phc-pattern__divider,
.phc-pattern--theme-graphite .phc-pattern__row,
.phc-pattern--theme-graphite .phc-pattern__process-step,
.phc-pattern--theme-graphite .phc-pattern__table tbody td,
.phc-pattern--theme-graphite .phc-pattern__table thead th {
  border-color: var(--phc-pattern-divider-on-dark);
  background-image: none;
}

.phc-pattern--theme-graphite .phc-pattern__divider {
  background: var(--phc-pattern-divider-on-dark);
}

.phc-pattern--theme-graphite .phc-pattern__faq-item,
.phc-pattern--theme-graphite .phc-pattern__table-wrap,
.phc-pattern--theme-graphite .phc-pattern__card,
.phc-pattern--theme-graphite .phc-pattern__media {
  border-color: rgba(255, 248, 235, 0.12);
}

.phc-pattern--theme-graphite .phc-pattern__faq-item,
.phc-pattern--theme-graphite .phc-pattern__table-wrap,
.phc-pattern--theme-graphite .phc-pattern__card {
  background: rgba(255, 255, 255, 0.05);
}

.phc-pattern--theme-graphite .phc-pattern__faq-question:hover {
  background: rgba(255, 255, 255, 0.04);
}

.phc-pattern--theme-graphite .phc-pattern__icon-badge,
.phc-pattern--theme-graphite .phc-pattern__badge,
.phc-pattern--theme-graphite .phc-pattern__number {
  background: rgba(255, 248, 235, 0.92);
  border-color: rgba(255, 193, 7, 0.18);
  color: var(--phc-pattern-accent-dark);
}

/* ==========================================================
   2. COMMON VISUAL GRAMMAR
   Единый язык контейнеров, хедеров, линий и hover.
   ========================================================== */

.phc-pattern {
  transition: var(--phc-pattern-transition);
}

.phc-pattern__eyebrow {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.phc-pattern__head {
  padding-block-end: 2px;
}

.phc-pattern__lead,
.phc-pattern__subtitle,
.phc-pattern__description {
  text-wrap: pretty;
}

.phc-pattern__divider {
  opacity: 1;
}


.phc-pattern__meta {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--phc-pattern-border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--phc-pattern-shadow-xs);
}

.phc-pattern--theme-cream .phc-pattern__meta,
.phc-pattern--theme-yellow-soft .phc-pattern__meta {
  background: rgba(255, 255, 255, 0.68);
}

.phc-pattern--theme-soft-gray .phc-pattern__meta {
  background: rgba(255, 255, 255, 0.78);
}

.phc-pattern--theme-graphite .phc-pattern__meta {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 248, 235, 0.10);
}

/* ==========================================================
   3. FEATURE LIST / SCOPE / SIMPLE INFO BLOCKS
   Не превращаем в карточки. Только мягкий ритм и акцент.
   ========================================================== */

.phc-pattern--feature .phc-pattern__list,
.phc-pattern--scope .phc-pattern__list,
.phc-pattern--condition .phc-pattern__list,
.phc-pattern--warning .phc-pattern__list,
.phc-pattern--note .phc-pattern__list {
  gap: 16px;
}

.phc-pattern--feature .phc-pattern__list-item,
.phc-pattern--scope .phc-pattern__list-item,
.phc-pattern--condition .phc-pattern__list-item,
.phc-pattern--warning .phc-pattern__list-item,
.phc-pattern--note .phc-pattern__list-item {
  padding-inline-start: 22px;
}

.phc-pattern--feature .phc-pattern__list-item::before,
.phc-pattern--scope .phc-pattern__list-item::before,
.phc-pattern--condition .phc-pattern__list-item::before,
.phc-pattern--warning .phc-pattern__list-item::before,
.phc-pattern--note .phc-pattern__list-item::before {
  inline-size: 10px;
  block-size: 10px;
  inset-block-start: 0.58em;
  background: var(--phc-pattern-accent);
  box-shadow: 0 0 0 4px var(--phc-pattern-accent-soft);
}

.phc-pattern--warning .phc-pattern__list-item::before {
  background: var(--phc-pattern-accent-dark);
  box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.12);
}

.phc-pattern--feature .phc-pattern__foot,
.phc-pattern--scope .phc-pattern__foot,
.phc-pattern--condition .phc-pattern__foot,
.phc-pattern--warning .phc-pattern__foot {
  padding-block-start: 4px;
}

.phc-pattern__feature-note {
  margin: 0;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--phc-pattern-accent);
  color: var(--phc-pattern-text-secondary);
}

/* ==========================================================
   4. SPEC PANEL / TECHNICAL TEXT / EXPLANATION BLOCKS
   Спокойный дорогой текст без карточек.
   ========================================================== */

.phc-pattern--spec .phc-pattern__rows,
.phc-pattern--tech .phc-pattern__rows,
.phc-pattern--note .phc-pattern__rows {
  border-block-start: 1px solid var(--phc-pattern-divider);
}

.phc-pattern--spec .phc-pattern__row,
.phc-pattern--tech .phc-pattern__row,
.phc-pattern--note .phc-pattern__row {
  position: relative;
  padding-block: 20px;
}

.phc-pattern--spec .phc-pattern__row-title,
.phc-pattern--tech .phc-pattern__row-title,
.phc-pattern--note .phc-pattern__row-title {
  letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--phc-accent-steel-strong);
}

.phc-pattern--spec .phc-pattern__row-value,
.phc-pattern--tech .phc-pattern__row-value,
.phc-pattern--note .phc-pattern__row-value {
  max-inline-size: 68ch;
}

.phc-pattern--theme-cream.phc-pattern--spec,
.phc-pattern--theme-cream.phc-pattern--tech {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    var(--phc-pattern-theme-cream-bg);
}

.phc-pattern--theme-soft-gray.phc-pattern--spec,
.phc-pattern--theme-soft-gray.phc-pattern--tech {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    var(--phc-pattern-theme-soft-gray-bg);
}

.phc-pattern__row--spec {
  position: relative;
  padding-inline-start: 20px;
  border-left: 1px solid rgba(31, 35, 40, 0.06);  
}

.phc-pattern__row--spec::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 10px;
  inset-block-end: 10px;
  inline-size: 3px;
  border-radius: 999px;
  background: linear-gradient(
  180deg,
  var(--phc-accent-steel-soft) 0%,
  var(--phc-accent-steel-line) 100%
  );
}

.phc-pattern--spec .phc-pattern__row:hover {
	background: linear-gradient(
	  90deg,
	  var(--phc-accent-steel-soft) 0%,
	  rgba(255,255,255,0) 60%
	);
}

.phc-pattern--spec .phc-pattern__row-content {
  color: rgba(31, 35, 40, 0.75);
}

/* ==========================================================
   5. VARIANT CARDS / PRICE CARDS
   Здесь карточная механика разрешена.
   ========================================================== */

.phc-pattern--variants .phc-pattern__card,
.phc-pattern--price .phc-pattern__card {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--phc-pattern-border);
  box-shadow:
    var(--phc-pattern-shadow-xs),
    var(--phc-pattern-shadow-soft-inset);
}

.phc-pattern--theme-cream.phc-pattern--variants .phc-pattern__card,
.phc-pattern--theme-cream.phc-pattern--price .phc-pattern__card {
  background: rgba(255, 255, 255, 0.76);
}

.phc-pattern--theme-yellow-soft.phc-pattern--variants .phc-pattern__card,
.phc-pattern--theme-yellow-soft.phc-pattern--price .phc-pattern__card {
  background: rgba(255, 255, 255, 0.84);
  border-color: var(--phc-pattern-border-warm);
}

.phc-pattern--variants .phc-pattern__card:hover,
.phc-pattern--price .phc-pattern__card:hover {
  border-color: var(--phc-pattern-border-strong);
}

.phc-pattern--variants .phc-pattern__card-value,
.phc-pattern--price .phc-pattern__card-value {
  color: var(--phc-pattern-accent-dark);
}

.phc-pattern--variants .phc-pattern__card-meta,
.phc-pattern--price .phc-pattern__card-meta {
  font-size: var(--phc-font-size-sm);
}

.phc-pattern--price .phc-pattern__card {
  gap: 10px;
}

.phc-pattern--price .phc-pattern__card-title {
  font-size: var(--phc-font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.phc-pattern--price .phc-pattern__card-value {
  font-size: clamp(1.375rem, 1.8vw, 1.875rem);
}

/* ==========================================================
   6. TEMPLATE GRID
   Один из ключевых акцентных внутренних блоков.
   ========================================================== */

.phc-pattern--templates {
  overflow: clip;
}

.phc-pattern--templates.phc-pattern--theme-yellow-soft {
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 193, 7, 0.11) 0%,
      rgba(255, 193, 7, 0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 100%
    ),
    var(--phc-pattern-theme-yellow-soft-bg);
}

.phc-pattern--templates .phc-pattern__card {
  gap: 14px;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(180, 120, 16, 0.14);
}

.phc-pattern--templates .phc-pattern__card:hover {
  border-color: rgba(180, 120, 16, 0.22);
}

.phc-pattern--templates .phc-pattern__media {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(250, 248, 244, 0.9) 100%
    );
  box-shadow: var(--phc-pattern-shadow-xs);
}

.phc-pattern--templates .phc-pattern__template-id {
  background: rgba(31, 35, 40, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.phc-pattern--templates .phc-pattern__card-title {
  font-size: var(--phc-font-size-base);
}

.phc-pattern--templates .phc-pattern__card-meta {
  font-size: var(--phc-font-size-sm);
}

/* ==========================================================
   7. PROCESS SECTION
   Линии и номера, без карточного развала.
   ========================================================== */

.phc-pattern--process .phc-pattern__process {
  position: relative;
}

.phc-pattern--process .phc-pattern__process-step {
  position: relative;
}

.phc-pattern--process .phc-pattern__number {
  position: relative;
  z-index: 1;
  box-shadow:
    var(--phc-pattern-shadow-xs),
    0 0 0 8px rgba(255, 193, 7, 0.08);
}

.phc-pattern--process .phc-pattern__process-body {
  padding-block-start: 4px;
}

.phc-pattern--process .phc-pattern__process-title {
  letter-spacing: -0.01em;
}

.phc-pattern--process.phc-pattern--theme-white .phc-pattern__process-step,
.phc-pattern--process.phc-pattern--theme-cream .phc-pattern__process-step,
.phc-pattern--process.phc-pattern--theme-soft-gray .phc-pattern__process-step,
.phc-pattern--process.phc-pattern--theme-yellow-soft .phc-pattern__process-step {
  background-image: linear-gradient(
    to right,
    rgba(255, 193, 7, 0.06),
    rgba(255, 193, 7, 0)
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

.phc-pattern--process.phc-pattern--theme-graphite .phc-pattern__number {
  box-shadow:
    var(--phc-pattern-shadow-xs),
    0 0 0 8px rgba(255, 193, 7, 0.06);
}

/* ==========================================================
   8. PROOF GALLERY
   Спокойная галерея без рекламного шума.
   ========================================================== */

.phc-pattern--gallery .phc-pattern__card,
.phc-pattern--proof .phc-pattern__card {
  padding: 14px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.80);
}

.phc-pattern--gallery .phc-pattern__media,
.phc-pattern--proof .phc-pattern__media {
  box-shadow: var(--phc-pattern-shadow-xs);
}

.phc-pattern--gallery .phc-pattern__card-meta,
.phc-pattern--proof .phc-pattern__card-meta {
  font-size: var(--phc-font-size-sm);
}

/* ==========================================================
   9. FAQ
   Максимально близко к тому языку, который тебе нравится.
   ========================================================== */

.phc-pattern--faq .phc-pattern__faq {
  gap: 14px;
}

.phc-pattern--faq .phc-pattern__faq-item {
  box-shadow: var(--phc-pattern-shadow-xs);
  transition: var(--phc-pattern-transition);
}

.phc-pattern--faq .phc-pattern__faq-item:hover {
  box-shadow: var(--phc-pattern-shadow-sm);
}

.phc-pattern--faq .phc-pattern__faq-question {
  position: relative;
}

.phc-pattern--faq .phc-pattern__faq-question::after {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  inset-inline-end: 20px;
  inset-block-end: 0;
  block-size: 1px;
  background: transparent;
  transition: var(--phc-pattern-transition);
}

.phc-pattern--faq .phc-pattern__faq-item.is-open .phc-pattern__faq-question::after {
  background: var(--phc-pattern-divider);
}

.phc-pattern--faq .phc-pattern__faq-icon {
  color: var(--phc-pattern-accent-dark);
}

.phc-pattern--faq .phc-pattern__faq-answer {
  color: var(--phc-pattern-text-secondary);
}

.phc-pattern--theme-yellow-soft.phc-pattern--faq .phc-pattern__faq-item {
  border-color: var(--phc-pattern-border-warm);
}

.phc-pattern--theme-yellow-soft.phc-pattern--faq .phc-pattern__faq-question:hover {
  background: rgba(255, 255, 255, 0.44);
}

.phc-pattern--theme-graphite.phc-pattern--faq .phc-pattern__faq-item {
  background: rgba(255, 255, 255, 0.05);
}

.phc-pattern--theme-graphite.phc-pattern--faq .phc-pattern__faq-item.is-open .phc-pattern__faq-question::after {
  background: var(--phc-pattern-divider-on-dark);
}

/* ==========================================================
   10. TIMING / WARNING / CONDITION PANELS
   Чистый B2B-каркас с тёплой B2C-подачей.
   ========================================================== */

.phc-pattern--timing .phc-pattern__inner,
.phc-pattern--warning .phc-pattern__inner,
.phc-pattern--condition .phc-pattern__inner {
  gap: 24px;
}

.phc-pattern--timing .phc-pattern__body,
.phc-pattern--warning .phc-pattern__body,
.phc-pattern--condition .phc-pattern__body {
  gap: 18px;
}

.phc-pattern--timing .phc-pattern__meta,
.phc-pattern--warning .phc-pattern__meta,
.phc-pattern--condition .phc-pattern__meta {
  align-self: flex-start;
}

.phc-pattern--warning.phc-pattern--theme-yellow-soft {
  background:
    linear-gradient(
      180deg,
      rgba(255, 193, 7, 0.08) 0%,
      rgba(255, 193, 7, 0.02) 100%
    ),
    var(--phc-pattern-theme-yellow-soft-bg);
}

.phc-pattern--timing .phc-pattern__badge,
.phc-pattern--warning .phc-pattern__badge,
.phc-pattern--condition .phc-pattern__badge {
  min-block-size: 2rem;
}

/* ==========================================================
   11. TABLE DATA
   Спокойная таблица в духе хорошего интерфейса, не Excel-решётка.
   ========================================================== */

.phc-pattern--table .phc-pattern__table-wrap {
  box-shadow: var(--phc-pattern-shadow-xs);
}

.phc-pattern--table .phc-pattern__table thead th {
  letter-spacing: 0.01em;
}

.phc-pattern--table .phc-pattern__table tbody tr:hover td {
  background: rgba(255, 193, 7, 0.04);
}

.phc-pattern--theme-soft-gray.phc-pattern--table .phc-pattern__table thead th {
  background: rgba(255, 255, 255, 0.74);
}

.phc-pattern--theme-yellow-soft.phc-pattern--table .phc-pattern__table thead th {
  background: rgba(255, 255, 255, 0.54);
}

.phc-pattern--theme-graphite.phc-pattern--table .phc-pattern__table thead th {
  background: rgba(255, 255, 255, 0.04);
}

.phc-pattern--theme-graphite.phc-pattern--table .phc-pattern__table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================
   12. EMPHASIS STATE
   Только для 1–2 внутренних блоков на странице.
   ========================================================== */

.phc-pattern--emphasis {
  box-shadow: var(--phc-pattern-shadow-md);
}

.phc-pattern--emphasis .phc-pattern__title {
  max-inline-size: 20ch;
}

.phc-pattern--theme-yellow-soft.phc-pattern--emphasis {
  border-color: rgba(180, 120, 16, 0.18);
}


/* Исправление для emphasis на светлых темах */
.phc-pattern--theme-cream.phc-pattern--emphasis {
  background:
    linear-gradient(
      180deg,
      rgba(255, 193, 7, 0.04) 0%,
      rgba(255, 193, 7, 0) 100%
    ),
    var(--phc-pattern-theme-cream-bg);
}

.phc-pattern--theme-white.phc-pattern--emphasis {
  background:
    linear-gradient(
      180deg,
      rgba(255, 193, 7, 0.04) 0%,
      rgba(255, 193, 7, 0) 100%
    ),
    var(--phc-pattern-theme-white-bg);
}

/* ==========================================================
   13. RESPONSIVE VISUAL DENSITY
   На мобилке меньше "рамочности", больше полезной площади.
   ========================================================== */

@media (max-width: 768px) {
  .phc-pattern {
    box-shadow: var(--phc-pattern-shadow-xs);
  }

  .phc-pattern__meta {
    padding: 7px 10px;
  }

  .phc-pattern--variants .phc-pattern__card,
  .phc-pattern--price .phc-pattern__card,
  .phc-pattern--templates .phc-pattern__card,
  .phc-pattern--gallery .phc-pattern__card,
  .phc-pattern--proof .phc-pattern__card {
    box-shadow: none;
  }

  .phc-pattern--faq .phc-pattern__faq {
    gap: 10px;
  }

  .phc-pattern--faq .phc-pattern__faq-item {
    box-shadow: none;
  }

  .phc-pattern--faq .phc-pattern__faq-question::after {
    inset-inline-start: 16px;
    inset-inline-end: 16px;
  }

  .phc-pattern--process .phc-pattern__number {
    box-shadow:
      var(--phc-pattern-shadow-xs),
      0 0 0 6px rgba(255, 193, 7, 0.08);
  }

  .phc-pattern--templates .phc-pattern__template-id {
    inset-inline-start: 10px;
    inset-block-start: 10px;
    min-block-size: 1.875rem;
    padding-inline: 0.625rem;
  }

  .phc-pattern--table .phc-pattern__table th,
  .phc-pattern--table .phc-pattern__table td {
    padding: 14px 14px;
  }
}

@media (max-width: 768px) {
  .phc-pattern--table .phc-pattern__table {
    min-inline-size: 520px;
  }

  .phc-pattern--table .phc-pattern__table th,
  .phc-pattern--table .phc-pattern__table td {
    font-size: var(--phc-font-size-sm);
  }
}