/* =========================================================
   Hex partner grid
   Used by: page-hop-tac-quoc-te.php,
            page-hop-tac-trong-nuoc.php,
            page-hop-tac-mang-luoi.php

   Single-fluid grid: the wrapper has a fixed pixel width
   (set by JS based on hex size * cols); CSS scales the
   whole wrapper to fit the available container width
   without distorting the brick layout. Works on every
   viewport from 320px upward.
========================================================= */

.partner-hex-section {
  padding: 72px 0 88px;
  background: var(--bg-body);
  color: var(--text-main);
}

.partner-hex-section .container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--iu-container-offset);
}

.partner-hex-header {
  text-align: center;
  margin-bottom: 36px;
}

.partner-hex-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--iu-blue-700);
  font-size: var(--iu-type-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.partner-hex-title {
  margin: 0;
  color: var(--iu-blue-950);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: var(--iu-weight-section-title);
  letter-spacing: -0.02em;
  line-height: var(--iu-leading-section-title);
}

.partner-hex-lead {
  max-width: 720px;
  margin: 10px auto 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* Organization directory reuses the cooperation hex system without adding a
   second page container or another section heading. */
.partner-hex-grid--organization {
  padding: 0 0 24px;
  background: transparent;
}

.partner-hex-grid--organization .container {
  max-width: none;
  padding-inline: 0;
}

.partner-hex-grid--organization .partner-hex-stage {
  padding-top: 24px;
  padding-bottom: 48px;
}

.organization-directory-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--iu-blue-700);
  font-weight: 750;
  text-decoration: none;
}

.organization-directory-back:hover,
.organization-directory-back:focus-visible {
  color: var(--iu-blue-950);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .partner-hex-grid--organization .partner-hex-stage {
    padding-top: 16px;
    padding-bottom: 36px;
  }
}

/* The wrapper is the single source of truth for the layout.
   JS computes its pixel width and height; CSS scales it
   down with `transform` so the brick pattern stays intact. */
.partner-hex-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* `overflow: hidden` would clip the hover drop-shadow and
     tooltip on row 1. Use `clip-path: inset(0)` would have
     the same effect. Instead, leave overflow visible so the
     hover affordances render cleanly. The padding gives
     headroom for the hover scale-up of the top row so the
     shadow stays inside the stage padding rather than
     spilling above it. */
  overflow: visible;
  padding-top: 40px;
  padding-bottom: 32px;
}

.partner-hex-wrapper {
  position: relative;
  /* JS positions the wrapper at the stage's left edge and scales
     from the top-left corner so the visual bounding box matches
     the layout box. transform-origin: top left keeps the brick
     layout anchored to the stage left. */
  transform-origin: top left;
  margin: 0;
}

/* Server-rendered fallback for cooperation grids. JavaScript replaces these
   items only on cooperation pages; organization pages keep the HTML version. */
.partner-hex-wrapper:not(.is-enhanced) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 16px;
  width: 100%;
  height: auto;
}

.partner-hex-fallback-row {
  display: contents;
}

/* Organization directory: four tiles per row in a staggered honeycomb. Full
   rows alternate around the parent's center axis; an incomplete final row is
   centered independently so the overall directory remains balanced. */
.partner-hex-grid--organization .partner-hex-wrapper {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  margin-inline: auto;
  transform: none;
}

.partner-hex-grid--organization .partner-hex-fallback-row {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  gap: 18px;
  width: calc(88.8889% - 2px);
  margin-right: auto;
  margin-left: 0;
}

.partner-hex-grid--organization .partner-hex-fallback-row + .partner-hex-fallback-row {
  margin-top: clamp(-44px, -3vw, -28px);
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(even) {
  margin-right: 0;
  margin-left: auto;
}

.partner-hex-grid--organization .partner-hex-fallback-row.is-incomplete {
  justify-content: flex-start;
}

/* Small directories do not need a stagger anchor. Center their only row as a
   compact group, while incomplete rows in larger directories keep following
   the alternating honeycomb rhythm above them. */
.partner-hex-grid--organization .partner-hex-fallback-row.is-short-directory {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.partner-hex-grid--organization .partner-hex-fallback-item {
  flex: 0 1 calc((100% - 54px) / 4);
  width: calc((100% - 54px) / 4);
  margin-inline: 0;
  background: #d4262f;
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(5n + 1) .partner-hex-fallback-surface {
  background: #fff1f1;
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(5n + 2) .partner-hex-fallback-surface {
  background: #edf6ff;
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(5n + 3) .partner-hex-fallback-surface {
  background: #f1f8ee;
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(5n + 4) .partner-hex-fallback-surface {
  background: #fff7e5;
}

.partner-hex-grid--organization .partner-hex-fallback-row:nth-child(5n) .partner-hex-fallback-surface {
  background: #f6f0fb;
}

.partner-hex-fallback-item {
  display: block;
  width: min(100%, 156px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 2px;
  background: var(--iu-blue-700);
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  color: var(--iu-blue-950);
  text-decoration: none;
}

.partner-hex-fallback-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 18%;
  background: #fff;
  clip-path: inherit;
  text-align: center;
}

.partner-hex-fallback-surface img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partner-hex-fallback-name {
  display: -webkit-box;
  overflow: hidden;
  color: #073b78;
  font-family: var(--iu-font-sans);
  font-size: clamp(0.74rem, 0.9vw, 0.84rem);
  font-weight: 800;
  line-height: 1.18;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.partner-hex-fallback-item:hover,
.partner-hex-fallback-item:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.2));
  outline: none;
}

@media (max-width: 760px) {
  .partner-hex-wrapper:not(.is-enhanced),
  .partner-hex-grid--organization .partner-hex-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .partner-hex-grid--organization .partner-hex-fallback-row {
    display: contents;
    width: auto;
    margin: 0;
  }

  .partner-hex-grid--organization .partner-hex-fallback-row:nth-child(even) {
    transform: none;
  }

  .partner-hex-fallback-item,
  .partner-hex-grid--organization .partner-hex-fallback-item {
    flex: none;
    width: 100%;
  }
}

/* Each hex tile is a clickable anchor. The SVG child paints
   the hexagon shape and tile content. */
.partner-hex-item {
  position: absolute;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.35s ease;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  z-index: 1;
  /* Scale around the top center so the bottom of the tile
     stays anchored when the user hovers. This keeps the row
     alignment intact and prevents the top edge of the row-1
     tiles from clipping against the section padding. */
  transform-origin: top center;
}

.partner-hex-item:hover,
.partner-hex-item:focus-visible {
  transform: scale(1.12);
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.28));
  z-index: 5;
  outline: none;
}

.partner-hex-item:focus-visible .partner-hex-shape {
  stroke: var(--iu-blue-950);
  stroke-width: 3;
}

.partner-hex-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.partner-hex-shape {
  stroke: var(--iu-blue-700);
  stroke-width: 2;
  transition: stroke 0.25s ease, stroke-width 0.25s ease;
}

/* Tooltip-style label that appears below the hex on hover.
   Lives inside the anchor (so it inherits the anchor's
   hover state) but positioned absolutely so it renders
   outside the hex. Position is computed at hover time so
   the label stays anchored to the original hex position
   even when the tile scales up. */
.partner-hex-label {
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
  white-space: nowrap;
  padding: 2px 6px;
  pointer-events: none;
  opacity: 0;
  /* Use translate to center, then counter-scale so the label
     stays the same size when the parent tile scales up on hover. */
  transform: translate(-50%, 6px) scale(1);
  transition: opacity 0.25s ease;
  z-index: 6;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  max-width: 220px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  /* When the anchor scales up, this label sits inside the
     anchor and would inherit the scale. Counter-scale so the
     label stays at the original size. */
  transform-origin: top center;
}

.partner-hex-item:hover .partner-hex-label,
.partner-hex-item:focus-visible .partner-hex-label {
  opacity: 1;
  /* When the parent anchor scales up by 1.08, the label would
     inherit the same scale. Counter-scale by 1/1.08 ≈ 0.9259
     so the label stays at the original visual size. */
  transform: translate(-50%, 6px) scale(0.9259);
}

/* Single-partner layout
   When the data has only 1 entry (e.g. the mang-luoi page after
   pruning to entries with logos), the JS still anchors the wrapper
   to the stage's top-left corner with transform-origin: top-left.
   Center the wrapper horizontally and vertically inside the stage
   and shift the lone tile to the middle of the wrapper so it sits
   in the visual focal area instead of stuck to the top-left
   corner. The JS layout pipeline is untouched — these rules only
   apply to the explicit modifier class. */
.partner-hex-section--single .partner-hex-stage {
  /* Centring a single hex tile inside the stage. Grid layout
     centres the wrapper both horizontally and vertically. */
  display: grid;
  place-items: center;
  /* The default `padding-top: 40px; padding-bottom: 32px` adds
     headroom for hover affordances in multi-tile layouts; the
     single-tile layout doesn't need that headroom and the
     asymmetric padding would offset the tile inside the grid
     container. Reset both. */
  padding-top: 0;
  padding-bottom: 0;
  max-width: 100%;
  /* The JS pipeline sets `stage.style.height = scaledHeight`
     inline, but for a single partner the wrapper is not scaled
     so the stage should hug the wrapper's natural height.
     Reset the inline height with `height: auto` so the stage
     takes the wrapper's intrinsic height instead of ballooning
     to the visual-scaled height. */
  height: auto !important;
}
.partner-hex-section--single .partner-hex-wrapper {
  /* The JS pipeline still uses `transform: scale(N)` to fit the
     wrapper to the stage width and sets inline `width: cols*hexSize`
     on the wrapper. For a single partner we want a 1-tile-sized
     wrapper so the grid `place-items: centre` actually lands the
     tile on the visual focal area. !important overrides the
     inline width from `renderGrid`. */
  width: var(--hex-size, 60px) !important;
  height: var(--hex-size, 60px) !important;
  /* The grid centres the wrapper based on its layout box. Keep
     `transform-origin: center` so the unscaled tile sits in the
     middle of the layout box and `transform: none` overrides the
     JS pipeline's scale-to-stage that would otherwise balloon the
     hex to fill the entire stage width. */
  transform-origin: center;
  transform: none !important;
}
.partner-hex-section--single .partner-hex-item {
  /* The JS positions this single tile at (0, 0) in the
     1-tile-sized wrapper. The unscaled wrapper sits at its
     natural size; the grid centre handles the visual
     positioning so no offset is needed here. */
  margin-left: 0;
  margin-top: 0;
  /* Override the JS-defined `width/height: hexSize` is fine
     because it's the same value, but the inline styles on the
     item are identical to the wrapper box so they coincide. */
  left: 0;
  top: 0;
}