/*
Theme Name: INTECLA
Version: 1.22
Text Domain: intecla
*/
* { box-sizing: border-box; }
body { margin: 0; color: #0E2A4A; background: #FFFFFF; font: 1rem/1.85 system-ui, sans-serif; }
.site-header, main, .site-footer { width: min(960px, calc(100% - 40px)); margin-inline: auto; }
.site-header, .site-footer { padding-block: 20px; }
.site-header img { display: block; width: 144px; height: auto; }
main { padding-block: 28px 54px; }
h1, h2 { line-height: 1.35; }
h2 { margin: 2.5rem 0 .75rem; }
#mission { margin-top: 0; font-size: clamp(2rem, 5vw, 4rem); }
.entry-content > p { max-width: 46rem; }
.wp-block-button__link { background: #1B4F91; color: #fff; border-radius: 4px; }
a:focus-visible { outline: 3px solid #1B4F91; outline-offset: 4px; }
.site-footer { border-top: 1px solid #D3E7F5; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.4rem; }
.site-header nav a { color: #0E2A4A; text-decoration: none; font-size: .88rem; font-weight: 650; }
.site-header nav .recruit-link { color: #fff; background: #1B4F91; padding: .5rem .85rem; }
.home-layout { width: min(1160px, calc(100% - 40px)); }
.home-layout #mission {
  margin: clamp(1rem, 5vw, 4rem) 0 1.25rem;
  padding-left: clamp(.75rem, 3vw, 2rem);
  border-left: 5px solid #38B6FF;
  font-size: clamp(2.15rem, 6vw, 5.5rem);
  letter-spacing: -.045em;
  line-break: strict;
}
.home-layout #mission + p { font-size: clamp(1rem, 1.8vw, 1.2rem); }
.home-layout #mission + p + .wp-block-buttons { margin-block: 1.75rem clamp(3rem, 7vw, 6rem); }
.home-layout .entry-content > h2:not(#mission) {
  border-top: 1px solid #D3E7F5;
  margin: 3rem 0 .55rem;
  padding-top: 1.65rem;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
}
.home-layout .entry-content > p { margin-top: .6rem; }
.home-layout .wp-block-button__link { background: #1B4F91; padding: .75rem 1.15rem; }
.roles { margin-top: 2.75rem; background: #EDF8FF; padding: clamp(20px, 5vw, 52px); }
.roles h2 { margin-top: 0; }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.role-grid > div { padding: 1rem; background: #fff; }
.role-grid dt { font-weight: 700; color: #1B4F91; }
.role-grid dd { margin: .5rem 0 0; font-size: .9rem; }
.roles > a { color: #1B4F91; font-weight: 650; }
@media (max-width: 720px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .role-grid { grid-template-columns: 1fr; }
}

.site-header { border-bottom: 3px solid #38B6FF; }
main:not(.home-layout) article > h1 { border-left: 6px solid #38B6FF; padding-left: 1rem; font-size: clamp(2rem, 5vw, 3.6rem); }
main:not(.home-layout) .entry-content > h2 { border-top: 1px solid #D3E7F5; padding-top: 1.25rem; }
main:not(.home-layout) .wp-block-list { background: #EDF8FF; padding: 1.1rem 1.5rem 1.1rem 2.5rem; }
main:not(.home-layout) .wp-block-list li + li { margin-top: .45rem; }

body { background: #0E2A4A; color: #F2F8FE; }
a { color: #8AD8FF; }
a:focus-visible { outline-color: #8AD8FF; }
.site-header { border-bottom-color: #38B6FF; }
.site-header img { border-radius: 4px; }
.site-header nav a { color: #F2F8FE; }
.site-header nav .recruit-link,
.home-layout .wp-block-button__link {
  background: #38B6FF;
  color: #0E2A4A;
  font-weight: 700;
}
.home-layout #mission { color: #FFFFFF; }
.home-layout .entry-content > p { color: #DCEAF7; }
.home-layout .entry-content > h2:not(#mission),
main:not(.home-layout) .entry-content > h2,
.site-footer { border-color: #45617E; }
.roles { background: #163858; border-left: 4px solid #38B6FF; }
.role-grid > div, main:not(.home-layout) .wp-block-list {
  background: #214564;
  color: #F2F8FE;
}
.role-grid dt, .roles > a { color: #8AD8FF; }
.equipment-panorama { margin: 0; }
.equipment-panorama img {
  display: block;
  width: 100%;
  height: clamp(220px, 38vw, 590px);
  object-fit: cover;
  object-position: center;
}
.equipment-panorama figcaption {
  padding: .5rem max(20px, calc((100% - 1160px) / 2));
  color: #DCEAF7;
  font-size: .8rem;
}
.section-link { color: inherit; text-decoration: underline; text-decoration-color: #38B6FF; text-underline-offset: .23em; }
.section-link:hover { color: #8AD8FF; }
.related-pages { margin-top: 3rem; border-top: 1px solid #45617E; padding-top: 1.5rem; }
.related-pages h2 { margin: 0 0 1rem; }
.related-pages ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: .65rem; list-style: none; margin: 0; padding: 0; }
.related-pages a { display: flex; justify-content: space-between; gap: 1rem; height: 100%; padding: .65rem .85rem; border: 1px solid #45617E; color: #F2F8FE; text-decoration: none; }
.related-pages a:hover { border-color: #38B6FF; color: #8AD8FF; }

main:not(.home-layout) { width: min(820px, calc(100% - 40px)); }
main:not(.home-layout) article > h1 { margin: 1rem 0 1.25rem; }
main:not(.home-layout) .entry-content > p:first-child {
  color: #DCEAF7;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.entry-content > p { max-width: 38em; line-height: 1.95; }
main:not(.home-layout) .entry-content > h2 {
  margin: 2.6rem 0 .65rem;
  color: #8AD8FF;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
}
main:not(.home-layout) .entry-content > h3 {
  margin: 1.5rem 0 .35rem;
  padding-left: .7rem;
  border-left: 3px solid #38B6FF;
}
.entry-content > h2 + p, .entry-content > h3 + p { margin-top: .35rem; }
main:not(.home-layout) .wp-block-list { border-radius: 6px; }
.home-layout .entry-content > h2:not(#mission) { font-size: clamp(1.4rem, 3vw, 2rem); }
.role-grid { gap: .75rem; }
.role-grid > div { border-top: 2px solid #38B6FF; }
.related-pages h2 { font-size: 1.25rem; }

body { background: #F0F6FB; color: #223A50; }
a { color: #1B4F91; }
a:focus-visible { outline-color: #1B4F91; }
.site-header nav a, .home-layout #mission { color: #0E2A4A; }
.home-layout .entry-content > p, main:not(.home-layout) .entry-content > p:first-child,
.equipment-panorama figcaption { color: #34516B; }
.home-layout .entry-content > h2:not(#mission), main:not(.home-layout) .entry-content > h2,
.site-footer, .related-pages { border-color: #C5D8E8; }
h1, h2, h3, main:not(.home-layout) .entry-content > h2 { color: #0E2A4A; }
.roles, .visual-section { background: #DDECF8; }
.role-grid > div, main:not(.home-layout) .wp-block-list, .related-pages a,
.portrait-card, .visual-steps li, .career-diagram li { background: #FFFFFF; color: #223A50; }
.role-grid dt, .roles > a, .section-link { color: #1B4F91; }
.section-link:hover, .related-pages a:hover { color: #0E2A4A; }
.related-pages a { border-color: #B9D1E4; }
.visual-section { margin-top: 2.5rem; padding: clamp(1rem, 4vw, 2rem); }
.visual-section > h2 { margin: 0 0 1rem; }
.portrait-grid, .visual-steps, .career-diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .8rem;
  padding: 0;
  list-style: none;
}
.portrait-card, .visual-steps li, .career-diagram li { padding: 1rem; }
.portrait-card h3 { margin-bottom: .25rem; }
.portrait-card p { margin-top: 0; }
.portrait-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: .75rem;
  text-align: center;
  color: #34516B;
  background: #E8F2F9;
  border: 1px dashed #789AB6;
}
.team-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.visual-steps { counter-reset: process; }
.visual-steps li { counter-increment: process; }
.visual-steps li::before { content: counter(process); display: block; color: #1B4F91; font-weight: 700; }
.visual-steps span, .career-diagram span { display: block; font-size: .9rem; }
.work-visual { margin: 1rem 0 0; }
.work-visual img { display: block; width: 100%; height: auto; }
.work-visual figcaption { font-size: .8rem; }
.role-card::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .65rem;
  background: center / contain no-repeat;
}
.role-design::before { background-image: url('icon-design.png'); }
.role-management::before { background-image: url('icon-management.png'); }
.role-installation::before { background-image: url('icon-installation.png'); }
.role-support::before { background-image: url('icon-support.png'); }
.page-image { margin: 1.25rem 0 1.75rem; }
.page-image.portrait-slot { aspect-ratio: 16 / 7; min-height: 9rem; }
.page-image img { display: block; width: 100%; height: auto; }
.role-image {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: .75rem;
  background: #E8F2F9;
}
.role-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.role-image-placeholder {
  padding: .5rem;
  border: 1px dashed #789AB6;
  color: #34516B;
  text-align: center;
  font-size: .85rem;
}
.home-illustration {
  margin: 0;
  background: #F0F6FB;
}
.home-illustration img {
  display: block;
  width: 100%;
  height: clamp(170px, 47vw, 250px);
  object-fit: contain;
}
.home-layout #mission { font-size: clamp(2.05rem, 4vw, 3.75rem); margin-top: 1rem; }
.home-layout #mission + p + .wp-block-buttons { margin-bottom: 2rem; }
@media (min-width: 780px) {
  .home-layout .entry-content:has(> #mission) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .home-layout .entry-content > * { grid-column: 1 / -1; }
  .home-layout .entry-content:has(> #mission) > .home-illustration {
    grid-column: 5 / -1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .home-layout .home-illustration img { height: clamp(280px, 31vw, 390px); }
  .home-layout .entry-content > #mission,
  .home-layout .entry-content > #mission + p,
  .home-layout .entry-content > #mission + p + .wp-block-buttons {
    grid-column: 1 / 8;
    position: relative;
  }
  .home-layout .entry-content > #mission {
    grid-row: 1;
    align-self: end;
    margin-top: 2.5rem;
    background: linear-gradient(90deg, #F0F6FB 72%, #F0F6FB00);
  }
  .home-layout .entry-content > #mission + p { grid-row: 2; max-width: 32ch; background: #F0F6FB; }
  .home-layout .entry-content > #mission + p + .wp-block-buttons { grid-row: 3; align-self: start; }
}
.home-layout .entry-content > h2:not(#mission), .home-layout .roles { clear: both; }
.home-layout .roles .role-image-placeholder {
  background-color: #EDF5FB;
  background-image: var(--role-icon);
  background-size: 3.5rem;
  background-position: center 30%;
  background-repeat: no-repeat;
  align-items: end;
}
.role-design { --role-icon: url('icon-design.png'); }
.role-management { --role-icon: url('icon-management.png'); }
.role-installation { --role-icon: url('icon-installation.png'); }
.role-support { --role-icon: url('icon-support.png'); }
.role-card:has(.role-image)::before { display: none; }
@media (max-width: 520px) {
  .team-profile { grid-template-columns: 1fr; }
}