/* TAMIYOUZ / Marketing Packages portfolio websites, shops and systems.
 * Existing published project URLs / screenshots only. Arabic + English.
 * Loaded AFTER portfolio-premium.css to override legacy fixed-height framing.
 */
.portfolio-tabs-section .portfolio-tabs {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  max-width:1150px!important;
  gap:11px!important;
}
.portfolio-tabs-section .portfolio-project-lead {
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 4px 20px;gap:15px;
  border-bottom:1px solid rgba(229,194,130,.14);
  margin-bottom:18px;
}
.portfolio-tabs-section .portfolio-project-lead h3 {
  margin:7px 0 3px;
  color:#fff8e9;
  font:900 22px/1.45 "Cairo",system-ui,sans-serif;
  letter-spacing:-.3px;
}
.portfolio-tabs-section .portfolio-project-lead p{
  margin:3px 0 0;color:#aebed3;
  font:600 12px/1.8 "Cairo",system-ui,sans-serif;
}
.portfolio-tabs-section .portfolio-project-eyebrow {
  font:800 10px/1.4 system-ui,sans-serif;
  color:#e5bc77;letter-spacing:1.25px;direction:ltr;
  unicode-bidi:isolate;display:inline-block;
}
.portfolio-tabs-section .portfolio-project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:17px;
  width:100%;
  min-width:0;
}
.portfolio-tabs-section .portfolio-project-card {
  min-width:0;width:100%;
  position:relative;
  display:block;
  border-radius:19px;
  border:1px solid rgba(233,189,117,.26);
  background:linear-gradient(145deg,#172e4a,#0c2039);
  overflow:hidden;
  box-shadow:0 13px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .35s ease,transform .35s cubic-bezier(.2,.85,.2,1),box-shadow .35s ease;
}
.portfolio-tabs-section .portfolio-project-card[hidden] {display:none!important}
.portfolio-tabs-section .portfolio-project-link {
  display:flex;
  flex-direction:column;
  width:100%;height:100%;
  min-height:0;
  text-decoration:none!important;
  color:inherit!important;
  outline-offset:-4px;
}
.portfolio-tabs-section .portfolio-project-link:focus-visible{
  outline:3px solid #fae0aa!important;
  border-radius:15px;
}
.portfolio-tabs-section .portfolio-project-media {
  display:block;
  width:100%;
  position:relative;
  overflow:hidden;
  aspect-ratio:1.57;
  background:linear-gradient(145deg,#102b48,#08182f);
  border-bottom:1px solid rgba(237,191,105,.15);
}
.portfolio-tabs-section .portfolio-project-media::before{
  content:"";
  position:absolute;z-index:1;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#bd8945,#f5d59b,#c59351);
}
.portfolio-tabs-section .portfolio-project-media img {
  display:block;width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  padding:9px 5px 0;
  border-radius:13px 13px 0 0;
  background:#0b2039;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.portfolio-tabs-section .portfolio-project-media .portfolio-project-index {
  display:grid;place-items:center;
  position:absolute;z-index:2;
  top:14px;inset-inline-start:13px;
  min-width:33px;height:31px;
  background:rgba(7,22,41,.92);
  color:#f3d398;
  border:1px solid rgba(235,192,111,.48);
  border-radius:9px;
  font:800 10px/1 system-ui,sans-serif;
  backdrop-filter:blur(8px);
}
.portfolio-tabs-section .portfolio-project-media .portfolio-project-open {
  display:grid;place-items:center;
  position:absolute;z-index:2;
  top:14px;inset-inline-end:13px;
  width:37px;height:35px;
  color:#09223e;
  background:#f1cc87;
  border:1px solid rgba(255,245,211,.68);
  border-radius:11px;
  font:900 18px/1 system-ui,sans-serif;
  box-shadow:0 7px 20px rgba(0,0,0,.26);
  transition:transform .3s ease;
}
.portfolio-tabs-section .portfolio-project-bottom {
  display:flex;align-items:flex-start;flex-direction:column;
  flex:1 1 auto;
  padding:15px 17px 17px;
  min-height:131px;
  gap:6px;
}
.portfolio-tabs-section .portfolio-project-category {
  color:#d5b479;
  font:700 10px/1.6 "Cairo",system-ui,sans-serif;
  letter-spacing:.2px;
}
.portfolio-tabs-section .portfolio-project-name {
  display:block;
  width:100%;
  color:#fffaf0;
  font:900 17px/1.5 "Cairo",system-ui,sans-serif;
  overflow-wrap:anywhere;
}
.portfolio-tabs-section .portfolio-project-visit {
  display:flex;gap:9px;align-items:center;
  margin-top:auto;
  padding-top:8px;
  width:100%;
  font:800 11px/1.65 "Cairo",system-ui,sans-serif;
  color:#eaca94;
}
.portfolio-tabs-section .portfolio-project-visit span {
  display:grid;place-items:center;
  width:23px;height:23px;
  color:#e8c388;
  border:1px solid rgba(239,193,110,.23);
  border-radius:8px;
  font:800 13px/1 system-ui,sans-serif;
}
@media(hover:hover) and (pointer:fine){
  .portfolio-tabs-section .portfolio-project-card:hover {
    transform:translateY(-5px);
    border-color:rgba(247,204,133,.72);
    box-shadow:0 23px 48px rgba(0,0,0,.35),0 0 30px rgba(244,189,107,.08);
  }
  .portfolio-tabs-section .portfolio-project-card:hover img{transform:scale(1.055)}
  .portfolio-tabs-section .portfolio-project-card:hover .portfolio-project-open{transform:translate(-2px,-2px)}
}
.portfolio-tabs-section .portfolio-show-more {
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:min(320px,100%);
  min-height:51px;
  margin:25px auto 5px;
  padding:10px 24px;
  border:1px solid rgba(247,208,137,.65);
  border-radius:15px;
  cursor:pointer;
  color:#fbe4b7;
  font:800 13px/1.5 "Cairo",system-ui,sans-serif;
  background:linear-gradient(135deg,#1b3957,#102640);
  box-shadow:0 12px 26px rgba(0,0,0,.2);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.portfolio-tabs-section .portfolio-show-more span{font:800 19px/1 system-ui}
.portfolio-tabs-section .portfolio-show-more:focus-visible{outline:3px solid #fae0aa;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .portfolio-tabs-section .portfolio-show-more:hover{
    transform:translateY(-3px);
    border-color:#ffe5aa;
    background:linear-gradient(135deg,#224a70,#153753);
  }
}
@media(max-width:1050px){
  .portfolio-tabs-section .portfolio-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }
  .portfolio-tabs-section .portfolio-tabs .portfolio-tab{min-height:66px!important}
}
@media(max-width:650px){
  .portfolio-tabs-section .portfolio-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .portfolio-tabs-section .portfolio-project-grid{
    grid-template-columns:minmax(0,1fr);
    gap:13px;
  }
  .portfolio-tabs-section .portfolio-project-lead{
    padding:3px 0 14px;
    margin-bottom:14px;
  }
  .portfolio-tabs-section .portfolio-project-lead h3{font-size:18px}
  .portfolio-tabs-section .portfolio-project-lead p{font-size:11px}
  .portfolio-tabs-section .portfolio-project-media{aspect-ratio:1.75}
  .portfolio-tabs-section .portfolio-project-bottom{padding:13px 15px;min-height:115px}
  .portfolio-tabs-section .portfolio-project-name{font-size:16px}
  .portfolio-tabs-section .portfolio-show-more{width:100%}
}
@media(max-width:350px){
  .portfolio-tabs-section .portfolio-tabs .portfolio-tab{min-height:62px!important}
  .portfolio-tabs-section .portfolio-project-media{aspect-ratio:1.6}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-tabs-section .portfolio-project-card,
  .portfolio-tabs-section .portfolio-project-media img,
  .portfolio-tabs-section .portfolio-project-open,
  .portfolio-tabs-section .portfolio-show-more {transition:none!important;animation:none!important}
}
html[lang="en"] .portfolio-tabs-section .portfolio-project-lead,
html[lang="en"] .portfolio-tabs-section .portfolio-project-bottom,
html[lang="en"] .portfolio-tabs-section .portfolio-project-visit{
 direction:ltr;text-align:left;
}