/* PANAMA CROSSROADS — /gastro-2/ (GASTRO, PC 2024). Loads after main.css.
   Values extracted from the inline Elementor CSS of reference/page-gastro-2.html
   (post 23239). Root font-size is 17px, so em → px: 1em=17, 1.5em=25.5,
   1.882em=32, 2.6em=44.2.
   Theme defaults (reference/css/__custom.css) + the page's wp-custom-css:
     h1 kikuta 2.6em/1.2127em 400 uppercase, ls 1px (wp-custom-css beats the 2px token)
     h2 kikuta 1.5em/1.1em bold uppercase ls 1px (wp-custom-css beats 2.353em/400)
     h3 config 1.882em/1.1em 600 uppercase ls 1px
     h4 config 1em/1.231em 400 — but wp-custom-css restyles the team name to 20px
     p  config 1rem/1em, margin-bottom 1.3em
   Elementor forces `margin:0; line-height:1` on .elementor-heading-title.
   Schemes: hero = scheme_dark, but every string in it is explicitly #000000;
   G2/G3 = scheme_default (text #6D6F72, text_dark #000000) over #FFFFFF. */

/* ---- G1 hero (29b75ea, opt-fondo-seccion-1.png cover, container 943px) ------ */

.gs-hero {
  background: url(/assets/opt-fondo-seccion-1.webp) center center / cover no-repeat;
}
.gs-hero .container { max-width: 943px; }

/* sc_layouts_hide_on_tablet + sc_layouts_hide_on_mobile → gone ≤1024px, unlike the
   shared .hide-mobile which only drops ≤767px. */
.gs-hide-t { display: block; }

/* trx_sc_title h1, sc_align_center; the widget only sets the colour, so the size is
   the theme h1 token. */
.gs-hero__title {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 2.6em;              /* 44.2px */
  font-weight: 400;
  line-height: 1.2127em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}

/* text-editor d181166: two paragraphs, inline text-align:center, colour #000 */
.gs-hero__copy { color: #000000; text-align: center; }
.gs-hero__copy p { margin: 0 0 1.3em; line-height: 1.45; }
.gs-hero__copy p:last-child { margin-bottom: 0; }

/* ---- G2 the chefs (b225bab, stretched, bg #FFFFFF) -------------------------- */

.gs-chefs { background: #FFFFFF; color: #6D6F72; }

/* icon-box 7feb83d / a7673a6, position inline-start: wrapper align-items:start,
   gap:15px; elementor-mobile-position-block-start stacks it ≤767px. */
.gs-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.gs-head__icon {
  flex: none;
  width: 32.527px;
  height: 32.527px;
  fill: #000000;
}
.gs-head__title {                /* icon-box title, h3 tag → theme h3 */
  margin: .3em 0;                /* .elementor-icon-box-title, theme __plugins-full.css */
  font-family: config, sans-serif;
  font-size: 1.882em;            /* 32px */
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}

/* text-editor 44e2dfc — theme p, left aligned in the full-width column */
.gs-chefs__intro {
  font-size: 1em;
  line-height: 1.45;             /* theme p is 1em; unreadable for multi-line copy */
}

/* sc_team 3d-simple, two trx_addons_column-1_3 cards, gutter --theme-var-grid_gap
   (30px). The third slot stays empty, exactly as the original renders it.
   ponytail: the widget container's -45px bottom margin exists only to swallow the
   trailing column padding of the last row, which this grid never adds. */
.gs-chefs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.gs-chef__img {
  display: block;
  width: 100%;
  aspect-ratio: 570 / 696;       /* muzicon-thumb-rectangle */
  object-fit: cover;
}
/* wp-custom-css: .sc_team_3d-simple .sc_team_item_title (family stays the h4 token) */
.gs-chef__name {
  margin: 12px 0 0;
  font-family: config, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: #000000;
}

/* ---- G3 "También en el Gastro Fest" (7a94319, stretched, bg #FFFFFF) -------- */

.gs-more { background: #FFFFFF; color: #6D6F72; }

/* premium-img-gallery (cf16d11 / 5d0cf04 / 063b1f6), fitRows skin, two items at
   50% each, image height 550px cover, 100%-wide items ≤1024px, 300px tall ≤767px.
   ponytail: the plugin sheet that turns the widget's 6px cell/vcell settings into
   gutters was not archived with the reference page, so the settings are read
   literally as a 6px grid gap. Retune if the live page shows a wider seam. */
.gs-gal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.gs-gal li { overflow: hidden; }
.gs-gal img {
  display: block;
  width: 100%;
  height: 550px;
  object-fit: cover;
  transition: transform .3s ease;
}
.gs-gal li:hover img { transform: scale(1.1); }   /* the widget's `zoomin` effect */

/* heading widgets 79c5325 / 5bb47fe / 4e9db49: h2 tag, 10px widget padding, #000.
   Demoted to h3 here — they name the items under the section's own heading. */
.gs-gal__title {
  margin: 0;
  padding: 10px;
  font-family: kikuta, sans-serif;
  font-size: 1.5em;              /* 25.5px, wp-custom-css h2 */
  font-weight: 700;
  line-height: 1;                /* .elementor-heading-title */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}

/* ---- responsive: tablet ≤1024px -------------------------------------------- */

@media (max-width: 1024px) {
  .gs-hide-t { display: none; }
  .gs-hero .container { padding: 30px; }        /* column 0a573f7 */

  .gs-chefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gs-gal { grid-template-columns: 1fr; }
}

/* ---- responsive: mobile ≤767px --------------------------------------------- */

@media (max-width: 767px) {
  .gs-hero .container { padding: 50px; }        /* column 0a573f7 */
  /* widget padding 25px on top of the column's 50px leaves 225px at 375px, which the
     44px original overflows word by word. Down to 34px so the longest word fits. */
  .gs-hero__title { font-size: 34px; padding: 25px; }

  .gs-head { flex-direction: column; }
  .gs-chefs__grid { grid-template-columns: 1fr; }

  .gs-gal img { height: 300px; }
}