/* Pages composed in the block editor (templates/blocks.php). The widths come from the editor settings
   (inc/blocks.php): text 760px, wide = --container, full = the window. */
/* A classic theme gets no constrained-layout CSS from WordPress, so it is written here. Bands run from
   edge to edge and touch each other: full-width blocks and the theme's own sections (the section blocks
   and the "Default content" block print them as bare <section>s, a Home hero inside a .hero-block).
   A section pattern (a wide group .pondasi-section, inc/patterns.php) is a section unit too: it has the
   width of the sections' .container and its own room above and below, so it touches its neighbours.
   The quotation button keeps the width of the sections' container with its own room above and below.
   Every other block keeps the reading width inside the gutter, with room above and below where it
   meets a band, a section pattern or the page's edge. */
.blocks > :is(.alignfull, .hero-block, section:not([class*="wp-block-"])) {
  margin: 0;
  max-width: none;
}
.blocks > :where(:not(.alignfull, .hero-block, .quote-button, section:not([class*="wp-block-"]))) {
  max-width: min(var(--wp--style--global--content-size, 760px), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.blocks > .alignwide {
  max-width: min(var(--wp--style--global--wide-size, var(--container)), 100% - 2 * var(--gutter));
}
.blocks > :not(.alignfull, .hero-block, .quote-button, .pondasi-section, section:not([class*="wp-block-"])):first-child,
.blocks > :is(.alignfull, .hero-block, .pondasi-section, section:not([class*="wp-block-"])) + :not(.alignfull, .hero-block, .quote-button, .pondasi-section, section:not([class*="wp-block-"])) {
  margin-block-start: clamp(40px, 6vw, 72px);
}
.blocks > :not(.alignfull, .hero-block, .quote-button, .pondasi-section, section:not([class*="wp-block-"])):last-child,
.blocks > :not(.alignfull, .hero-block, .quote-button, .pondasi-section, section:not([class*="wp-block-"])):has(+ :is(.alignfull, .hero-block, .pondasi-section, section:not([class*="wp-block-"]))) {
  margin-block-end: clamp(40px, 6vw, 72px);
}
/* a section pattern: its padding is the room above and below (the first and last block add none) */
.blocks > .pondasi-section {
  margin-block: 0;
  box-sizing: border-box;
}
.blocks > .pondasi-section > :first-child,
.blocks > .pondasi-section > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}
.blocks > .pondasi-section > :last-child,
.blocks > .pondasi-section > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}
/* next to a section pattern a plain theme section (no background) keeps the pattern's room on that
   side, so pattern to pattern and pattern to section read as the same step */
.blocks > .pondasi-section + section.section:not([class*="section--"]) {
  padding-top: var(--wp--preset--spacing--l, clamp(40px, 6vw, 72px));
}
.blocks > section.section:not([class*="section--"]):has(+ .pondasi-section) {
  padding-bottom: var(--wp--preset--spacing--l, clamp(40px, 6vw, 72px));
}
/* the FAQ list keeps the reading width, from the section's left edge */
.blocks > .pondasi-section > .is-style-pondasi-faq,
.blocks > .pondasi-section > .wp-block-group__inner-container > .is-style-pondasi-faq {
  max-width: var(--wp--style--global--content-size, 760px);
}
.blocks .quote-button {
  margin: clamp(24px, 4vw, 40px) auto;
  max-width: calc(var(--container) + 2 * var(--gutter)); /* the text lines up with the sections' .container */
  padding-inline: var(--gutter);
}
.blocks .quote-button--center { text-align: center; }
.blocks .quote-button--right { text-align: right; }
.blocks > .hero-block {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
/* the transparent header makes room for itself above the first hero only; a later hero keeps the usual
   room above its text (same weight as the header's rule, later in the cascade, so the phone rules for
   split and card still win) */
[data-header="overlay"][data-has-hero] :where(.blocks > .hero-block:not(:first-child)) .home-hero {
  padding-top: clamp(72px, 10vw, 128px);
}
/* the theme colours headings in ink; inside a block with a text colour they take that colour */
:is(.blocks, .editor-styles-wrapper) .has-text-color :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
.blocks .wp-block-group.has-background {
  padding-inline: var(--gutter);
}
/* a band's constrained layout: its blocks keep the reading width (a classic theme gets no layout CSS;
   WordPress wraps a group's blocks in .wp-block-group__inner-container, which carries the layout class) */
.blocks .alignfull > .is-layout-constrained > :where(:not(.alignfull, .alignwide)),
.blocks .alignfull.is-layout-constrained > :where(:not(.alignfull, .alignwide)) {
  max-width: var(--wp--style--global--content-size, 760px);
  margin-inline: auto;
}
.blocks h1, .blocks h2, .blocks h3 {
  font-family: var(--font-display);
}
.editor-styles-wrapper .pondasi-default__note {
  margin: 0;
  padding: 8px 12px;
  font: 13px/1.4 system-ui, sans-serif;
  background: var(--mist);
  color: var(--ink);
}
.editor-styles-wrapper .pondasi-default {
  pointer-events: none; /* a preview: the content is edited under Profile & home */
}
.editor-styles-wrapper .pondasi-default.is-selected,
.editor-styles-wrapper .pondasi-default:focus {
  outline: 2px solid var(--accent);
}

/* ---------- The library blocks (inc/library.php, assets/js/library.js) ---------- */
:is(.library-testimonials, .library-team, .library-clients) .section__head {
  margin-bottom: clamp(24px, 4vw, 40px);
}
:is(.library-testimonials, .library-team, .library-clients) h2 {
  margin: 0;
}
.library-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.library-testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.library-testimonial blockquote {
  flex: 1;
  margin: 0 0 16px;
  font-size: 1.05rem;
}
.library-testimonial blockquote p {
  margin: 0;
}
.library-testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.library-testimonial__photo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.library-testimonial__who {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.library-testimonial__name {
  font-weight: 700;
}
.library-testimonial__role {
  color: var(--muted);
  font-size: 0.9rem;
}
.library-stars {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
}
.library-stars svg {
  fill: var(--grey-light);
}
.library-stars svg.is-on {
  fill: var(--accent);
}
/* one large quote at a time: without the script every quote shows, one under the other */
.library-slider__slides {
  display: grid;
  gap: 40px;
}
.library-testimonials--quote .library-testimonial {
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  text-align: center;
  border: 0;
  background: none;
}
.library-testimonials--quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.35;
}
.library-slider.is-ready [data-slide]:not([data-current]) {
  display: none;
}
.library-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.library-slider__prev,
.library-slider__next {
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.library-slider__dots {
  display: flex;
}
.library-slider__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.library-slider__dot::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 50%;
  background: var(--grey-light);
}
.library-slider__dot[aria-current="true"]::before {
  background: var(--accent);
}
/* the team */
.library-members {
  display: grid;
  gap: 24px;
}
.library-team--cards .library-members {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
@media (max-width: 600px) {
  .library-team--cards .library-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}
.library-team--cards .library-member__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* a member without a photo: the initials on a quiet tile of the photo's size */
.library-team--cards .library-member__initials {
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--ink);
  font: 700 clamp(2rem, 5vw, 3.5rem)/1 var(--font-display);
}
.library-team--cards .library-member__body {
  padding-top: 16px;
}
.library-member__name {
  margin: 0;
  font-size: 1.15rem;
}
.library-member__role {
  margin: 4px 0 0;
  color: var(--muted);
}
.library-member__bio {
  margin: 12px 0 0;
}
.library-member__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.library-team--list .library-members {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 16px 40px;
}
.library-team--list .library-member {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.library-team--list .library-member__photo {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.library-team--list .library-member__links {
  margin-top: 4px;
}
/* client logos */
.library-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 24px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.library-logos li {
  display: flex;
  justify-content: center;
}
.library-logos img {
  display: block;
  max-height: 64px;
  width: auto;
  max-width: 100%;
  margin: auto;
  object-fit: contain;
}
.library-clients--grey img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}
.library-clients--grey a:hover img,
.library-clients--grey a:focus-visible img {
  filter: none;
  opacity: 1;
}
/* the moving strip: without the script (or with less motion) the logos stay a grid */
.library-marquee {
  overflow: hidden;
}
.library-marquee:not(.is-moving) .library-logos[aria-hidden="true"] {
  display: none;
}
.library-marquee.is-moving .library-marquee__track {
  display: flex;
  width: max-content;
  animation: library-marquee 40s linear infinite;
}
.library-marquee.is-moving .library-logos {
  display: flex;
  flex: none;
  gap: 48px;
  padding-right: 48px;
}
.library-marquee.is-moving .library-logos img {
  max-width: 160px;
}
.library-marquee:hover .library-marquee__track,
.library-marquee:focus-within .library-marquee__track {
  animation-play-state: paused;
}
@keyframes library-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .library-marquee__track {
    animation: none;
  }
}

/* ---------- Block styles of the section patterns (is-style-pondasi-*) ---------- */

.is-style-pondasi-faq {
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}
.is-style-pondasi-faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.is-style-pondasi-faq summary::-webkit-details-marker {
  display: none;
}
.is-style-pondasi-faq summary::after {
  content: "+";
  content: "+" / ""; /* a mark, not read aloud */
  color: var(--accent);
  font-size: 1.4em;
  line-height: 1;
}
.is-style-pondasi-faq[open] summary::after {
  content: "\2212";
  content: "\2212" / "";
}
.is-style-pondasi-faq > :not(summary) {
  margin-top: 12px;
  color: var(--muted);
}

.is-style-pondasi-steps {
  counter-reset: pondasi-step;
}
.is-style-pondasi-steps > .wp-block-column {
  counter-increment: pondasi-step;
  position: relative;
  padding-top: 56px;
}
.is-style-pondasi-steps > .wp-block-column::before {
  content: counter(pondasi-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font: 700 1.6rem/1 var(--font-display);
  color: var(--accent);
}

.is-style-pondasi-timeline {
  counter-reset: pondasi-step;
  border-left: 2px solid var(--rule);
  padding-left: 32px;
}
/* the steps sit in the group, or in its inner container on a classic theme */
.is-style-pondasi-timeline > :not(.wp-block-group__inner-container),
.is-style-pondasi-timeline > .wp-block-group__inner-container > * {
  counter-increment: pondasi-step;
  position: relative;
}
.is-style-pondasi-timeline > :not(.wp-block-group__inner-container)::before,
.is-style-pondasi-timeline > .wp-block-group__inner-container > *::before {
  content: counter(pondasi-step);
  position: absolute;
  left: -49px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.is-style-pondasi-stats > .wp-block-column {
  text-align: center;
}
.is-style-pondasi-stats .has-xxl-font-size {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.wp-block-columns:has(> .is-style-pondasi-featured) > .wp-block-column {
  border: 1px solid var(--rule);
  padding: 24px;
}
.is-style-pondasi-featured,
.wp-block-columns > .wp-block-column.is-style-pondasi-featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
}
@media (min-width: 782px) {
  .is-style-pondasi-featured,
  .wp-block-columns > .wp-block-column.is-style-pondasi-featured {
    transform: translateY(-8px);
  }
}

.is-style-pondasi-compare table {
  border-collapse: collapse;
  width: 100%;
}
.is-style-pondasi-compare th,
.is-style-pondasi-compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.is-style-pondasi-compare th:first-child,
.is-style-pondasi-compare td:first-child {
  text-align: left;
}
.is-style-pondasi-compare thead th {
  background: var(--ink);
  color: var(--paper);
}
/* on a phone the columns take the width of their words; a table wider than the screen scrolls */
.is-style-pondasi-compare.wp-block-table {
  overflow-x: auto;
}
@media (max-width: 600px) {
  .is-style-pondasi-compare table.has-fixed-layout {
    table-layout: auto;
  }
  .is-style-pondasi-compare .has-fixed-layout th,
  .is-style-pondasi-compare .has-fixed-layout td {
    padding: 10px 8px;
    overflow-wrap: normal;
    word-break: normal;
  }
}
.is-style-pondasi-compare tbody th {
  font-weight: 400;
}
.is-style-pondasi-compare .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.is-style-pondasi-mosaic.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
}
.is-style-pondasi-mosaic > .wp-block-image:nth-child(5n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
.is-style-pondasi-mosaic > .wp-block-image,
.is-style-pondasi-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: auto;
  margin: 0;
}
.is-style-pondasi-mosaic > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 699px) {
  .is-style-pondasi-mosaic.wp-block-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .is-style-pondasi-mosaic > .wp-block-image:nth-child(5n+1) {
    grid-column: auto;
    grid-row: auto;
  }
}